search

seiyria / bootstrap-slider

A slider control for Bootstrap 3 & 4.
http://seiyria.github.io/bootstrap-slider/
Other
2.99k stars 1.14k forks source link

How to add custom css class to slider ? #775

Closed HiCodin closed 7 years ago

HiCodin commented 7 years ago

Hi,

May I know how to add custom css class to slider for styling purpose ?

seiyria commented 7 years ago

You cant. We provide classes on each element so look at what you want to modify and do so that way.

benkaiser commented 5 years ago

@seiyria any chance we can look at this again? I'm happy to submit a PR.

The use case I have is that I switch out themes on the client-side by changing bootstrap css files. They all have .bg-primary with their theme color and I would like to apply that color specifically to the slider element by adding the class there.

Thoughts?

seiyria commented 5 years ago

It might be a bit frustrating, but I think you can just do div.bg-primary > slider and make it work. I'm more open to a PR but I'm not sure if we're scope creeping that functionality. @rovolution what do you think?

benkaiser commented 5 years ago

Regarding the technicality of that solution, because I don't control the source css files (they are just from bootswatch on a cdn) I can't just up the specificity to override. To make the custom override I would have to clone their repo and rebuild all the themes with the modification and lose the leverage on the cdn I have right now.

I'm actually leaning towards agreeing with you around not including it, it doesn't cleanly fall into the responsibility of this library. I think the solution I may follow instead is to simply fork and remove the background colors / hard-code the class I need.

rovolution commented 5 years ago

@benkaiser can you not control any content on the page?

rovolution commented 5 years ago

can you even add a custom <style> tag to your page and do the override there?

benkaiser commented 5 years ago

@rovolution I can add a custom style tag. The trick is that I dynamically switch out themes on the page. You can see it live here actually: https://next.kaiserapps.com/settings/ If you click over to the 'library' on the sidebar and play a song you'll see the slider show up for the progress through the song. The slider doesn't currently match the theme, but bootstrap provides a bg-primary class I can use to change the background color of an element based on the theme.

There is another alternative where when the user changes the theme, I add an addition bit of styling to the page specifically for the slider but then it requires me to store a map of every theme name to theme primary color in my codebase.

benkaiser commented 5 years ago

Ended up resorting to a fork with a single commit for now, not ideal as I'll have to rebase on updates but works for now. For anyone else wanting to use the hack: https://github.com/benkaiser/bootstrap-slider