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

Question

我在编码或网络开发方面没有任何专业知识。经过对 Google 数小时的研究，我最终编写了一组 （完美工作） 代码来构建具有 HTML、CSS 的范围滑块和 JS.

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

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

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

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

<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有以下两个pseudo-elements:

-webkit-slider-runnable-track
-webkit-slider-thumb

您可以使用 pseudo-selectors 设置它们的样式。这个 CodePen 有一个聪明的解决方案来实现你的意图。通过在缩略图上使用 box-shadows，您可以设置缩略图前后区域的样式。使用多重 box-shadows + 模糊来实现 gradient-like 效果。

我稍微编辑了您的代码以说明如何实现上述目标。休息只是关于您希望滑块的外观的偏好。您还可以使用 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>

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

How to change color, size and shape of elements in a range slider?

javascript

html

css

web

slider