如何更改范围滑块中元素的颜色、大小和形状？

Question

我在编码或网络开发方面没有任何专业知识。在 Google 进行了数小时的研究后，我最终编写了一组 （完美运行） 代码来构建一个包含 HTML、CSS 和 JS 的范围滑块。

我正在使用这个滑块来改变我智能手机中的媒体音量，this Media Control Panel 是使用名为 Tasker 的 Android 应用程序创建的。我的滑块功能正常，但我想对我的滑块进行一些外观更改。

有人可以帮我在我的代码中实现以下功能吗？

1. 滑块之前滑块部分的颜色/渐变。
2. 拇指后滑块部分的颜色/渐变。
3. 拇指的大小、形状、颜色和不透明度。

这是当前代码。随意编辑。

<div class = "container">
    <input type="range" 
    min="0" 
    max="25" 
    step="any" 
    value="%VOLM" 
    id="volm">
</div>

<style>
.container{
    display:flex;
    width:100%;
    padding-top:5
}

#volm{
    -webkit-appearance: none;
    background-color: magenta;
    border-radius: 2px;
    width:153px;
    height:5px;
</style>

<script>
    var slider = document.getElementById("volm");
    slider.addEventListener("input",function() 
{
    performTask("WebView Slider - Media Volume",1,slider.value,)}, false);
</script>

Answer 1

HTML Range Input 有以下两个伪元素：

1. -webkit-slider-runnable-track
2. -webkit-slider-thumb

您可以使用伪选择器设置它们的样式。 这个CodePen 有一个聪明的解决方案来实现你想要的。通过在拇指上使用框阴影，您可以设置拇指前后区域的样式。 使用多个 box-shadows + bluring 来实现类似渐变的效果。

我稍微编辑了您的代码以显示如何实现上述目标。休息只是关于您希望滑块看起来如何的偏好。您还可以使用 JavaScript 根据输入动态更改属性值。

.container{
    display:flex;
    width:100%;
    padding-top:5;
    height: fit-content;
}

#volm{
    position: relative;
    margin-top: 5px;
    border-radius: 2px;
    width:153px;
    height: 5px;
    -webkit-appearance: none;
}
input::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  position: relative;
  box-sizing: border-box;
  background-color: hsl(0deg, 0%, 90%);
  width: 100%;
  height: 20px;
  border-radius: 5px;
  overflow: hidden;
} 
input::-webkit-slider-thumb {
  position: relative;
  left: initial;
  bottom: 5px;
  -webkit-appearance: none;
  background-color: blue;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  box-shadow: -340px 0 0 320px #1597ff, inset 0 0 0 40px #1597ff, 340px 0 0 320px #00f18f, inset 0 0 0 40px #1597ff;
  margin-top: 5px;
}

<div class = "container">
    <input type="range" 
    min="0" 
    max="25" 
    step="any" 
    value="%VOLM" 
    id="volm">
</div>