Basic Usage

Download the latest toolcool-range-slider.min.js script from GitHub and add the following HTML to the page:

<tc-range-slider></tc-range-slider>

<script src="toolcool-range-slider.min.js"></script>

tc-range-slider is an alias for toolcool-range-slider:

<toolcool-range-slider></toolcool-range-slider>

<script src="toolcool-range-slider.min.js"></script>

The library is also available on the jsDelivr CND:

<tc-range-slider></tc-range-slider>

<script src="https://cdn.jsdelivr.net/npm/toolcool-range-slider/dist/toolcool-range-slider.min.js"></script>

The initial value is defined using the value attribute:

<tc-range-slider value="50"></tc-range-slider>

<script src="toolcool-range-slider.min.js"></script>

You can add more pointers using the value2, value3, and so on attributes. Note that value, value0, and value1 are synonymous and refer to the first value.

<tc-range-slider value1="20" value2="30" value3="40"></tc-range-slider>

<script src="toolcool-range-slider.min.js"></script>