click on the "noUi-value"

[sergey-kozlov]

Maybe you need to add the ability to set the value by clicking or tapping on the item "noUi-value"?

[leongersen]

You can querySelectorAll them and addEventListener externally.

[sergey-kozlov]

Yes) But it would be a good opportunity to "out of the box". Due to the formatting of the text labels calculation values to be set, it is difficult. Maybe, if it was at the label data-attribute with the raw value of the range, it would be easier. But I still think that this functionality is needed. Thanks for the answer.

[leongersen]

• add data-value to pips;
• add example of delegated event listener to read data-value and set the slider

[leongersen]

There's a new example in the documentation that shows how to do this. Thanks for participating in this project!

[ehassan66]

I have use the same code but when i click on any value my slider move from start. It should move on respective value. Here is my code . Can anyone please help.

https://jsfiddle.net/xfrtho8m/1/

var pipsSlider = document.getElementById('slider-pips');

            noUiSlider.create(pipsSlider, {
                //connect: true,
                range: {
                    min: 0,
                    max: 100
                },
                start: [50],
              // start: [1100,1850],
                pips: {mode: 'count', values: 5}
            });
            var pips = pipsSlider.querySelectorAll('.noUi-value');
            function clickOnPip() {
                var value = Number(pipsSlider.getAttribute('data-value'));

                pipsSlider.noUiSlider.set(value);
            }

            for (var i = 0; i < pips.length; i++) {

                // For this example. Do this in CSS!
                pips[i].style.cursor = 'pointer';
                pips[i].addEventListener('click', clickOnPip);
            }

[dartess]

@ehassan66
a) data-value is attr one pipe, not pips collection.
b) you use old version library. data-value was added in 11 version.
https://jsfiddle.net/8f2pwboa/

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.