CSS-only range
Is it possible to make a pure CSS range slider?
I'm looking to have a range such that the track colors from the left and from the right sides of the thumb are different
22 Replies
I'm not sure what you mean. There's
<input type="range" /> which gives you a slider, you can set min and max values?Yes, but I'm looking to color the tracks differently, such as
https://codepen.io/vsync/pen/mdEJMLv
Yair Even Or
CodePen
Multi Range input, CSS-only
range input slider with CSS ticks by using a wrapper with custom css properties (css variables) with min and max values printed at the edges minimum v...
I'm not sure what parts are essential for the range though
ah, so taking that -200% - 400% as an example, you want the bit below -200% to be one color, the bit between to be another, and the bit > 400% to be a third color?
This one
oh, so you just want to change the color of the active part?
Yeah, be able to have 2 different colors
Though I don't feel like JavaScript is needed, so I'm looking for a pure CSS solution
there's pseudo-elements for the various bits, but they're not standardized as far as I can find. Here's the ones for firefox:
https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-range-track#see_also
::-moz-range-track - CSS: Cascading Style Sheets | MDN
The ::-moz-range-track CSS pseudo-element is a Mozilla extension that represents the track (i.e., groove) in which the indicator slides in an of type="range".
there's a generator for styles, which is probably a lot easier https://www.cssportal.com/style-input-range/
if you look at the code, you can also see all the various pseudo-elements you can use to customize it manually, even if you don't want to use the generator
It seems like it only allows for a single track customization though
Like, I cannot color the right-side of the thumb
I can't really find any good resources on the pseudo-elements each of the browser support, but I know firefox can do it with the ones I linked first.
If it's not possible to only rely on CSS, I'll use JavaScript obviously, but a CSS-only solution is often simpler
not sure what you could do with javascript here tbh
other than set styles
That's not what I'm looking for though
The property only allows coloring the whole track in a single color
this one is though, right? https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-range-progress
I specifically linked the see-also so you could see the other options too
Whereas I'm looking to color both sides
I.e. this one only uses green,
whereas this one is using blue and gray
I don't know then, sorry
I think I found my almost-pure-CSS solution https://codepen.io/shashank_coder/pen/jOqxOpK
funny they title it
CSS | Range Slider and try to hide the js inside the htmlThe JS isn't used for the CSS but rather for the text
Nevermind, that was actually what I was looking for https://codepen.io/zyber/pen/NZrzGa
Eventually I found https://refreshless.com/nouislider
Not exactly pure-CSS, but it gets the job done
This is the library that https://github.com/TheComputerM/svelte-materialify uses
noUiSlider - JavaScript Range Slider | Refreshless.com
noUiSlider is a lightweight, ARIA-accessible JavaScript range slider with multi-touch and keyboard support. Great for responsive designs, and no dependencies!
GitHub
GitHub - TheComputerM/svelte-materialify: A Material UI Design Comp...
A Material UI Design Component library for Svelte heavily inspired by vuetify. - GitHub - TheComputerM/svelte-materialify: A Material UI Design Component library for Svelte heavily inspired by vuet...