🤩 If you like this project, please support us by starring our GitHub repository 🤩

Step

You can adjust the slide step using the step attribute. By default, the step is undefined, but can be any positive integer:

<tc-range-slider
  step="10"
  generate-labels="true" 
  value="50"
  round="0"></tc-range-slider>
<tc-range-slider
  min="10"
  max="50"
  step="1"
  generate-labels="true" 
  round="0"></tc-range-slider>
<tc-range-slider
  min="-100"
  max="100"
  step="5"
  generate-labels="true"
  round="0"></tc-range-slider>
<tc-range-slider
  min="-100"
  max="100"
  step="5"
  value1="0"
  value2="50"
  generate-labels="true"
  round="0"></tc-range-slider>

Step can also be changed programmatically:

<script>
    // get the reference
    const $slider = document.getElementById('slider-1');
    
    // change step
    $slider.step = 10;
    
    // or 
    // $slider.setAttribute('step', '10');
</script>

Or with TypeScript:

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

    // get step value 
    const step: TStep = $slider.step;
    console.log(step);
    
    // change step 
    $slider.step = 10;
    
    // or 
    // $slider.setAttribute('step', '10');
</script>