So I’ve been working on customizing range sliders for a website I’m making. The only way I know how to add a different color for both sides of the slider is to add a shadow to the thumb and then hide overflow. however, I wanted to make the thumb bigger than the bar, but I can’t do that without turning off overflow, which which let the shadow go outside of the box.
I tried turning the overflow off for only the thumb, and turning overflow on for only the shadow, but neither works. below is what my code looks like.
HTML:
<div class="slider">
<input type="range" class="customRange" id="rangeInput1" name="rangeInput1" min="0" max="100" value="50"
oninput="amount1.value=rangeInput1.value">
<output id="amount1" name="amount1" for="rangeInput1">50</output>
CSS:
.customRange {
-webkit-appearance: none;
background-color: #F998F6;
height: 20px;
overflow: hidden;
width: 400px;
border-radius: 50px;
}
.customRange::-webkit-slider-thumb {
-webkit-appearance: none;
background: #92008D;
border-radius: 50%;
box-shadow: -210px 0 0 200px #DD00D6;
cursor: pointer;
height: 20px;
width: 20px;
border: 0;
}
Maybe there’s another way to add two different colors for the different sides, because then I could turn on overflow, but I just have no idea.
You need to sign in to view this answers