我打算制作一个 slider ，逐步移动最小值 1 和最大值 5。
下面是我要找的 slider 图。
在 IE 中通过 -ms-fill-lower、-ms-fill-upper 属性处理，在 Firefox 中通过 -moz-range-progress 属性处理。 但是，chromium 不支持上述属性。
首先，我弄清楚了如何按值将渐变叠加应用于 -webkit-slider-runnable-track。但我发现了一种现象，在 25% 和 75% 的域外可以看到渐变。
如何在 chrome 中应用较低的填充/较高的填充？
代码
.range{
width:96px;
-webkit-appearance:none;
background-color:transparent;
}
.range:focus{
outline:none;
}
.range::-webkit-slider-thumb{
-webkit-appearance:none;
display:inline-block;
width:14px;
height:14px;
background-color:red;
border-radius:50%;
position:relative;
bottom:6px;
cursor:pointer;
}
.range::-webkit-slider-runnable-track {
width:100%;
height: 3px;
background-color:blue;
border: none;
cursor:pointer;
}
.range:focus::-webkit-slider-runnable-track{
background-color:blue;
}<div>
<input type="range" step="1" min="1" max="5" class="range">
</div>最佳答案
我们可以给 slider 一个渐变背景。然后我们需要做的就是计算需要填充多少输入。下面的示例可以处理各种范围值，而不仅仅是从 1 到 5。
我还更改了颜色以匹配您的示例。
const slider = document.querySelector(".range");
const adjustSlider = () => {
const min = slider.min;
const max = slider.max;
// Calculate visible width
const val = ((slider.value - min) * 100) / (max - min);
// Change these variables to the colors you need
const fillLeft = "#01c1c6";
const fillRight = "#d4f5f6";
slider.style.background = `linear-gradient(to right, ${fillLeft} ${val}%, ${fillRight} ${val}%`;
};
// Change background if input changes
slider.addEventListener("input", adjustSlider);
// We need to execute it at the start to set the initial value
adjustSlider();.range{
width:96px;
-webkit-appearance:none;
background-color:transparent;
}
.range:focus{
outline:none;
}
.range::-webkit-slider-thumb{
-webkit-appearance:none;
display:inline-block;
width:14px;
height:14px;
background-color:#01c1c6;
border-radius:50%;
position:relative;
bottom:6px;
cursor:pointer;
}
.range::-webkit-slider-runnable-track {
width:100%;
height: 3px;
border: none;
cursor:pointer;
}<div>
<input type="range" step="1" min="1" max="5" class="range">
</div>关于javascript - 在 Chrome 中将下/上填充应用于具有最小值和最大值的 "input range"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62691350/
相关文章：
https - create-react-app:如何使用 https 但带有签名证书？
python-3.x - 无法在 Python 3.8 上运行 Supervisor
typescript - TypeScript 中任意数量类型的非析取联合
oracle - 如何使用 UTF8 作为国家字符集在 docker 中创建 Oracle 数据库？
python - 比较两个列表，如果相等则替换第三个列表中的值
jsf - Primefaces Dynaform 奇怪的行为与 f :validateLength
azure - 如何使用 terraform 创建 azure 事件网格系统主题？
selenium - AWS Lambda 中的 Chrome Headless 返回空白页面