需要帮助构建音量滑块答案

【问题标题】：Need help building volume slider需要帮助构建音量滑块
【发布时间】：2019-08-13 08:24:17
【问题描述】：

我需要音量滑块方面的帮助。我正在构建一个基于wavesurfer.js 的播放器，但不知道如何自定义滑块的外观以如下图所示。我不是编码员，并尝试在此处自定义此示例https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_rangeslider

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}
</style>
</head>
<body>

<h1>Custom Range Slider</h1>

  
  <p>Custom range slider:</p>
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>

</body>
</html>

这就是我想要构建的：

【问题讨论】：

标签： html w3.css

【解决方案1】：

添加这个属性sn-p：

background: repeating-linear-gradient( 
to right,
#f6ba52,
#f6ba52 10px,
#ffd180 10px,
#ffd180 20px
);

在您的 .volumeBar{} 你可以玩弄颜色

【讨论】：

非常感谢莱洛。我得到了虚线图案，但有没有办法创建填充效果？基本上将虚线从黑色变为绿色，如果用户通过悬停或单击它进行调整？我几乎想创建单个按钮并具有悬停和单击类型的结构，因为我可以控制虚线的宽度，但是我不知道如何将它们与脚本配对，因此它们充当“音量调节器”。我很迷茫。