nouislider

Get nouislider to step down from 10 to 1 left to right


The various examples of nouislider show sliders that go from a minimum on the left to a maximum on the right. We now have a requirement to have the maximum on the left and for the slider to step down to the minimum. I was just wondering if anyone had managed to get nouislider to do this succesfully? I appreciate that the idea is somewhat daft, but I need to explore whether it's possible before I go back and say that.

Tried this:

            $(".custom-slider").each(function () {
                var slider = $('#' + $(this).attr('id') + ' div.ui-slider-handle');

                let sliderDiv = slider[0];          

                //Configure the slider control
                let scaleValues = [];
                let scaleDensity = 1;

                //scaleValues = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
                scaleValues = [100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0];
                scaleDensity = 10;

                sliderDiv.style.width = "100%";

                noUiSlider.create(sliderDiv, {
                    start: [0],
                    connect: true,
                    range: {
                        'min': 10,
                        'max': 0
                    },
                    step: -1,
                    pips: {
                        mode: 'positions',
                        values: scaleValues,
                        density: scaleDensity
                    }
                });

working on this html:

        <div>
            <div class="custom-slider-container">

                <div id="slider" class="custom-slider" runat="server">
                    <div class="ui-slider-handle"></div>
                </div>
                <br />
                <br />
                <br />
                <br />
            </div>
        </div>

I have to say I didn't think this would work and it hasn't. I get a slider displayed, with no pip labels and returning a NaN for each pip.


Solution

  • You can use the direction option to invert the slider direction.

    noUiSlider.create(sliderDiv, {
        start: 20,
        direction: 'rtl', // right to left
        range: {
            'min': 0,
            'max': 100
        }
    });