时间戳

首页 > 解决方案 > 需要帮助构建音量滑块

html - 需要帮助构建音量滑块

问题描述

我需要音量滑块方面的帮助。我正在构建一个基于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>

这就是我想要构建的：

虚线音量滑块

标签： htmlw3.css

解决方案

添加此属性片段：

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

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

推荐阅读