Add classes to handles

[AlecRust]

If you have a slider with two handles, there's no way to target them individually - they're both just a <div>.

Could you add .slider-from and .slider-to (or similar) classes to these handles to allow this?

[leongersen]

a:first-child div {
    /* style for first handle */
}
a + a div {
    /* style for second handle */
}

See for support: caniuse.com

[henryruhs]

answers like that won't make your plugin better, add more classes for better styling

[leongersen]

Not that I won't, but whats wrong with that answer?

[henryruhs]

it does not solve the issue and tag styling is a bad practice in this case.

please add classes to all elements, this btw. was a reason i switched back to jquery ui.

[leongersen]

I'll add some classes, but I'll say this: tag styling is a bad practice is just plain not true.

[henryruhs]

maby not true with your experience in css :D

[AlecRust]

Have to agree with @redaxmedia, it's far better to use prefixed classes for things like this. I'd add them to all appropriate elements.

Benefits include having better control over your stylesheet's specificity, more modular, more robust (allows elements to change in future versions without breaking things) and lends itself better to class-based stylesheets which seem to be the trend right now (for good reason imo).

[henryruhs]

thanks for pointing it out!

anyhow, you have a great plugin - keep improving it, there is a future for responsive (non jquery) web projects...

[leongersen]

Good discussion, so far. Do you have a source or supporting article for class-based stylesheets [...] seem to be the trend right now?

[leongersen]

Anyway, I've added some classes to the codebase, and I'll will push the code soon.

[AlecRust]

Here's a good article on it: http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/

Many thanks for the addition!

[AlecRust]

@leongersen Have you added these classes?

[aaly00]

@leongersen Have this issue been addressed?

[leongersen]

@afroty, it was, somewhere in 2013.

[aaly00]

@leongersen Sorry for commenting on a very old issue. I noticed noUi-handle- (upper and lower) to max and min handles, but if you have more than two the ones in the middle seems to not have a specific class. Is there something I am missing as to how to style them individually.

[leongersen]

All handles have a [data-handle] attribute, so you can do something like .noUi-handle[data-handle="4"].

[aaly00]

Thanks

[markgulisao]

HI is there anyway i could change the icon for the handle into a fa fa-calendar-plus-o icon for example? or can i add fa fa-calendar-plus-o icon somewhere within the slider itself? appreciate the help.

[leongersen]

@markgulisao Something like document.querySelector('.noUi-handle[data-handle="4"]').classList += 'fa fa-calendar-plus-o'; should do.

[markgulisao]

is that for changing the handle icon or for adding an icon within the slider. im sorry im not that proficient with coding yet. i plan to put the icons as stop point for the handle and an event happens once the handle reach the icon.

[github-actions[bot]]

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.