I have been struggling to achieve what I want: a “monorail” input range with a gradient background color that is being updated while sliding.
On this page, you’ll see 2 input range controls. The 1st one is what I want but with a changing background color when the user slides it. That is what is achieved in the 2nd one but it looks like a “railway track” whereas I want a “monorail”
What am I missing?
One of the CSS gurus will do it better than me, but:
input[type=range]::-webkit-slider-runnable-track,
input[type=range]::-moz-range-track {
background: transparent !important;
}
(The !important was required for me, but that may be because i’m injecting it via the inspector. Your code is inserting this value at a couple of different points, so you may want to hunt down anywhere that’s setting values for slider-runnable-track.)
You’ll need to break that into 2 rules because if a conforming browser encounters a pseudo class it doesn’t understand it is supposed to drop the whole rule for all the comma separated selectors.
It needs to be:
input[type=range]::-webkit-slider-runnable-track {
background: transparent !important;
}
input[type=range]::-moz-range-track {
background: transparent !important;
}
I believe Firefox is ok with it one block but not Chrome and others.