##
Range: Values List

Instead of specifying a minimum and maximum to define the slider range, it’s possible to provide a list of individual values. The provided elements can be numbers, texts, or any combination of these.

ABC example:

    <tc-range-slider
      data="a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z"
      value="d"
      generate-labels="true">
    </tc-range-slider>

Geometric progression example:

    <tc-range-slider
      generate-labels="true"
      data="2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, 4096, 8192">
    </tc-range-slider>

> In the case where numeric and textual data is mixed, we assume that all data is textual.

The data can also be set or changed via the API:

    <tc-range-slider id="slider-1"></tc-range-slider>

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

    <script>
        // get the reference
        const $slider = document.getElementById('slider-1');

        // change data
        $slider.data = [10, 20, 30];

        // or

        $slider.data = ['red', 'green', 'blue'];

        // or
        // $slider.setAttribute('data', '10, 20, 30');
    </script>

Typescript Example:

    <script>
        // get the reference
        const $slider = document.getElementById('slider-1') as RangeSlider;

        // change data
        $slider.data = ['red', 'green', 'blue', 'yellow', 'pink', 'brown'];
    </script>

> 📌 An example page with the source code can be found here.

Previous
Non-linear Slider
Next
Vertical Slider