##
Range: min & max

The slider range can be defined using the min and max attributes.

These attributes are optional, their default values are 0 and 100 respectively.

    <tc-range-slider generate-labels="true"></tc-range-slider>

The minimum and maximum can be any number:

    <tc-range-slider
      min="10"
      max="50"
      generate-labels="true"></tc-range-slider>

They can also be negative:

    <tc-range-slider
      min="-500"
      max="-100"
      value1="-400"
      value2="-200"
      generate-labels="true"></tc-range-slider>

Or any other combination:

    <tc-range-slider
      min="-500"
      max="500"
      value1="-400"
      value2="-200"
      value3="0"
      value4="200"
      round="0"
      generate-labels="true"></tc-range-slider>

Properties can also be changed programmatically:

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

        // set properties
        $slider.min = -200;
        $slider.max = 200;

        // or
        // $slider.setAttribute('min', '-200');
        // ...
    </script>

Or with TypeScript:

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

        // set properties
        $slider.min = -200;
        $slider.max = 200;

        // or
        // $slider.setAttribute('min', '-200');
        // ...
    </script>

Previous
Auto Generated Labels
Next
Rounding