I have a question about how to design a custom input slider with the label inside the field itself.
The desired output should look like the screenshot below:
https://i.sstatic.net/gE6EJ.png
I have successfully created the input field part, but I am struggling with adding the label and white color section.
.slider-container .slider {
-webkit-appearance: none;
overflow: hidden;
width: 100%;
height: 50px;
border-radius: 30px;
background: #b5b33c;
outline: none;
opacity: 0.7;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
}
.slider-container .slider:hover {
opacity: 1;
}
.content .slider-container .slider::-webkit-slider-runnable-track {
height: 50px;
-webkit-appearance: none;
color: #13bba4;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
background: #54565a url("https://i.imgur.com/OuvOpHG.png") 50% 50% no-repeat;
}
.slider::-moz-range-thumb {
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
background: #54565a url("https://i.imgur.com/OuvOpHG.png") 50% 50% no-repeat;
}<div class="slider-container">
<input
type="range"
min="1"
max="1000"
value="50"
class="slider"
id="range"
/>
</div>