如何使用 HTML 和 CSS 创建一个工作滑块？

在 web 应用程序中，滑块（也称为滚动条）是一种常见的用户界面组件。滑块通常用于在可滚动区域中滚动内容。但是，滑块也可以用于其他目的，例如调整音量或调整页面中的某些属性等。

在本文中，我们将重点介绍如何使用 HTML 和 CSS 创建一个工作滑块。这里所说的“工作滑块”指的是可以拖动的滑块，同时在其周围显示当前值。首先，我们要创建一个 HTML 文件并在其中定义一个滑块元素。

<div class="slider">  
  <input type="range" min="0" max="100" value="50" class="slider-bar"/>  
  <div class="slider-value">50</div>  
</div>  

在上面的代码片段中，我们定义了一个包含一个输入元素和一个值元素的 div 元素。输入元素的类型为“range”，它接受最小值、最大值和默认值参数。值元素用于显示当前滑块的值。

接下来，我们需要用 CSS 样式定义滑块的样式。我们可以对元素的外观和样式进行各种自定义，例如调整颜色、长度、粗细等。

.slider .slider-bar {  
  -webkit-appearance: none;  
  width: 100%;  
  height: 8px;  
  background-color: #eee;  
  outline: none;  
  opacity: 0.7;  
  -webkit-transition: .2s;  
  transition: opacity .2s;  
}  
  
.slider .slider-bar::-webkit-slider-thumb {  
  -webkit-appearance: none;  
  appearance: none;  
  width: 20px;  
  height: 20px;  
  background-color: #4caf50;  
  cursor: pointer;  
}  
  
.slider .slider-bar::-moz-range-thumb {  
  width: 20px;  
  height: 20px;  
  background-color: #4caf50;  
  cursor: pointer;  
}  
  
.slider .slider-value {  
  font-size: 18px;  
  font-weight: bold;  
  color: #333;  
  text-align: center;  
  margin-top: 8px;  
}  

上述 CSS 样式代码中，我们对滑块元素的样式进行定义。我们使用 W3C 标准语法定义了滑块的样式，并添加了一些额外的样式，例如调整滑块颜色、大小和外观等。

最后，我们需要编写一些 JavaScript 代码来处理滑块值的更改，并将其更新到值元素中。

var slider = document.querySelector(".slider-bar");  
var output = document.querySelector(".slider-value");  
output.innerHTML = slider.value;  
  
slider.oninput = function() {  
  output.innerHTML = this.value;  
}  

上面的 JavaScript 代码片段在滑块值更改时更新值元素的内容。代码定义一个滑块对象和一个输出对象，并将滑块值保存到输出对象中。

以上是如何使用 HTML 和 CSS 创建一个工作滑块的完整过程。通过理解上述步骤，您可以自行创建滑块并根据需要自定义其外观和样式。

参考资料：

https://www.w3schools.com/howto/howto_js_rangeslider.asp