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.