Is there a way to make the thumb of a slider overflow without letting its shadow overflow?

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

Related Post