有没有办法让滑块的拇指溢出而不让其阴影溢出？

Question

所以我一直致力于为我正在制作的网站定制范围滑块。我知道如何为滑块两侧添加不同颜色的唯一方法是向拇指添加阴影，然后隐藏溢出。但是，我想让拇指比条形更大，但如果不关闭溢出，我就无法做到这一点，这会让阴影超出盒子的范围。

我尝试仅针对拇指关闭溢出，并仅针对阴影打开溢出，但这两种方法都不起作用。下面是我的代码的样子。

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;
}

也许还有另一种方法可以为不同的面添加两种不同的颜色，因为这样我就可以打开溢出，但我就是不知道。

Answer 1

您可以通过一些java脚本来实现这一点。为此，您必须删除阴影方法，并且还可以使用渐变来填充滑动条的不同部分。 你可以像这样向你的CSS添加渐变，

<style>
        .customRange {
        -webkit-appearance: none;
        width: 400px;
        height: 20px;
        border-radius: 50px;
        background: linear-gradient(to right, #DD00D6 50%, #F998F6 50%); 
        outline: none;
        transition: background 0.3s;
        }

        .customRange::-webkit-slider-thumb {
        -webkit-appearance: none;
        background-color: #92008D;
        border-radius: 50%;
        height: 30px; 
        width: 30px;
        cursor: pointer;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        }

        .customRange::-webkit-slider-runnable-track {
        -webkit-appearance: none;
        height: 20px;
        background: transparent;
        }

        .customRange::-moz-range-track {
        background: transparent;
        }

        .customRange::-ms-track {
        background: transparent;
        border-color: transparent;
        color: transparent;
        }

        .customRange:active {
        background: linear-gradient(to right, #DD00D6 var(--value), #F998F6 var(--value));
        }

    </style>

添加此样式后，您需要添加一个 JScript 函数，使背景渐变随着滑块的移动而动态变化。

<script>
        const rangeInput = document.getElementById("rangeInput1");
        const updateBackground = () => {
        const value = rangeInput.value;
        rangeInput.style.background = `linear-gradient(to right, #DD00D6 ${value}%, #F998F6 ${value}%)`;
        };

        rangeInput.addEventListener('input', updateBackground);
    </script>

这样你就可以改变拇指的大小而无需处理溢出。