##
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>

Previous
Rounding
Next
Non-linear Slider