Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

click on the "noUi-value" #733

Closed
sergey-kozlov opened this issue Dec 2, 2016 · 6 comments
Closed

click on the "noUi-value" #733

sergey-kozlov opened this issue Dec 2, 2016 · 6 comments
Labels
Milestone

Comments

@sergey-kozlov
Copy link

@sergey-kozlov sergey-kozlov commented Dec 2, 2016

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

@leongersen leongersen added the Support label Dec 10, 2016
@leongersen
Copy link
Owner

@leongersen leongersen commented Dec 10, 2016

You can querySelectorAll them and addEventListener externally.

@sergey-kozlov
Copy link
Author

@sergey-kozlov sergey-kozlov commented Dec 12, 2016

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 leongersen added Improvement and removed Support labels Dec 22, 2016
@leongersen
Copy link
Owner

@leongersen leongersen commented Dec 22, 2016

  • add data-value to pips;
  • add example of delegated event listener to read data-value and set the slider
@leongersen leongersen added this to the 9.3.0 milestone Feb 18, 2017
@leongersen leongersen removed this from the 9.3.0 milestone Dec 29, 2017
@leongersen leongersen added this to the noUiSlider 11 milestone Dec 30, 2017
@leongersen
Copy link
Owner

@leongersen leongersen commented Jan 12, 2018

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

@leongersen leongersen closed this Jan 12, 2018
@ehassan66
Copy link

@ehassan66 ehassan66 commented Aug 27, 2019

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
Copy link

@dartess dartess commented Aug 28, 2019

@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/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants
You can’t perform that action at this time.