##
Non-linear Slider

The step property can also be defined as a function. This can be useful when you need to create non-linear slider behavior.

For example, the slider below has a step of 5 if the value is less than 50, otherwise the step is 10:

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

    <script src="toolcool-range-slider.min.js"></script>
    <script>
        const $slider = document.getElementById('slider-1');

        $slider.step = (value, percent) => {
            return value < 50 ? 5 : 10;
        };
    </script>

Step function received current value and its percentage (relative to the slide min/max). And it should return the result value, which should be absolute, not percentage.

TypeScript example:

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

    <script src="toolcool-range-slider.min.js"></script>
    <script>
        const $slider = document.getElementById('slider-1') as RangeSlider;

        $slider.step = (_value: string | number, _percent: number) => {
          return _value < 50 ? 5 : 10;
        };
    </script>

> 📌 An example page with the source code can be found here.

Previous
Step
Next
Range: Values List