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>