🤩 If you like this project, please support us by starring our GitHub repository 🤩
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>