css 音量控制条 |div 滑动 touch css3

HTML代码：
<div class="volume-bar">
<input type="range" min="0" max="1" step="0.1" value="1" class="volume-slider">
</div>
CSS代码：
.volume-bar {
width: 200px;
height: 10px;
}
.volume-slider {
-webkit-appearance: none;
width: 100%;
height: 10px;
background: #ccc;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: #666;
cursor: pointer;
border-radius: 50%;
}
.volume-slider::-moz-range-thumb {
width: 20px;
height: 20px;
background: #666;
cursor: pointer;
border-radius: 50%;
}

在上面的代码中，大家首先创建了一个包含音量控制条的<div>元素，然后创建了一个用于控制音量的<input>元素。<input>元素的类型被设置为“range”，这意味着它将显示为一个可以滑动的滑块。

接下来，大家将添加CSS样式来定制和美化大家的音量控制条。大家为音量控制条和滑块指定了宽度和高度，然后添加了一些背景和过渡效果。

最后，大家使用了一些伪元素（::-webkit-slider-thumb和::-moz-range-thumb）来指定音量滑块的样式。这些伪元素使您能够在不使用JavaScript的情况下创建样式定制的滑块。

总体来说，CSS音量控制条是一种有用的工具，可以帮助您提高您的音频和视频体验。尝试使用上面的代码创建您自己的音量控制条吧！