I have the range but without color when the button moves, I want to achieve that when the button moves, the color bar is filled. any ideas?
In this image you can see what I want to do
.range{
height: 20px;
width: 100%;
background-color: #f1f1f1;
border-radius: 50px;
-webkit-appearance: none;
}
.range::-moz-range-thumb {
width: 25px;
height: 25px;
background-color: #ff0000;
border-radius: 50%;
border: 0;
}
<input id="range" class="range" type="range">
In the example styles, the color is indicated, which it takes when the range of the selector is moved.
Important, in case
-moz-range-progress
it is not supported for Chrome, that's why the example for different browsers.In the case of Chrome
In the case of Firefox
Source: StackOverflow English
To add style to a
<input type="range">
you can do it in the following way:If what you want is just to give a different color to the scrollbar when the cursor moves, you can do it by getting the value of the slider in a js variable (
input
) and then passing it to a css variable (--value
) and applying it to the bar with a background of gradient (overriding default styles before).If you want a more stylized bar with a label like the one in the image, in addition to the above you must add a code to assign the value of the range to the label and styles to give the cursor a circular shape:
and that way it looks very similar to the one in the image.
Both solutions work and look fine in Firefox, Chrome and other browsers.
If you want more information on how to give styles to these elements, you can consult the following links with which I learned and they are 100% in Spanish:
Styling sliders, another use case
Styling sliders, Input type range
I hope it helps. Greetings.