How to make a input range
Hey guys i dont know how to change the color of the bar, i ask to gpt and he give a lot of css, there is onother way?(the blue is what i have and the other is what i want )
6 Replies
I don't know off the top of my head / not at my computer, but it's a range input. You probably need to select it and style it with a pseudo selector
Check under background-color of your nav css
this is a good article breaking down how to do it
https://www.smashingmagazine.com/2021/12/create-custom-range-input-consistent-browsers/
Smashing Magazine
Creating A Custom Range Input That Looks Consistent Across All Brow...
Range inputs have notoriously been a pain to style. Each browser renders the input differently requiring you to use vendor prefixes in order to create a cohesive look and feel. In this article, we’ll take a look at the quirkiness of the HTML range input and demonstrate how to style the input to look consistent across all major browsers.
Has to be a custom input, pretty much have to strip it and build it back starting with
appearance: none; and use the pseudo elements like ::-webkit-range-thumb / ::-moz-range-thumb and ::-webkit-slider-runnable-track / ::-moz- range track
I think I’ve followed the article linked above before and if you google custom range input css you can find more supplementary resources. Gets really fun when you need to make a range with two thumbs to set a “range” of colour between themwouldn't
accent-color cover a lot of this these days?As jsnkuhn says, accent-color will change the color however bear in mind that it will change both the track and the "thumb" which might not be what you want (though from looking at your images this should probably suffice).
Alternatively, if you want these to have different colors you need to go down the pseudo element route. The only problem with this solution, at least as far as I know, is that this gives the whole track a uniform color and not just the "active" part so it isn't as clear as the default behaviour.
One method to get around this issue of the whole track being the same color is to use box-shadows on the thumb to simulate the track, using a different box-shadow color on either side of the thumb.