如何使用 CSS 和 JavaScript 创建自定义范围滑块？

什么是范围滑块？

范围滑块是一种用于在一个指定的范围内选择数值的控件。它由一个滑块与一个指示选择的数字的显示框组成。滑块可以通过拖动或点击进行移动，以选择所需的数值。

HTML 基础

在 HTML 中创建一个范围滑块控件需要使用 input 元素，并将它的 type 属性设置为 "range"。如下是一个简单的例子：

<input type="range" min="0" max="100" value="50">

在这个例子中，滑块可以从 0 到 100 的范围内选择数值，初始值为 50。

基本的 CSS 样式

可以使用 CSS 样式来对滑块进行美化。下面的 CSS 样式可以改变滑块的颜色：

input[type=range] {

  -webkit-appearance: none;
  width: 100%;
  height: 20px;
  background: #ddd;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
input[type=range]:hover {
  opacity: 1;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #4CAF50;
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #4CAF50;
  cursor: pointer;
}

这段 CSS 样式将滑块的默认样式设置为透明，然后在鼠标悬停时改变透明度。此外，它还定义了滑块的轨道和滑块拇指的颜色。

使用 JavaScript 进行自定义

滑块的外观可以更进一步的定制。例如，可以更改拇指的形状、轨道的颜色和大小以及在滑块值更改时执行其他操作。

改变拇指的形状

可以使用 CSS 样式来改变滑块拇指的形状。下面的 CSS 样式将拇指的形状更改为圆形：

input[type=range]::-webkit-slider-thumb {

  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

此样式使用 border-radius 属性将滑块拇指的形状更改为圆形。

改变轨道的颜色和大小

可以使用 CSS 样式来改变滑块轨道的颜色和大小。下面的 CSS 样式将轨道的颜色更改为红色，宽度更改为 50%：

input[type=range] {

  width: 50%;
  height: 5px;
  -webkit-appearance: none;
  background-color: red;
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
  cursor: pointer;
}

执行其他操作

可以使用 JavaScript 代码执行其他操作，例如在滑块值更改时更新页面上的其他元素。下面的代码将创建一个滑块，并在其值更改时更新它下面的文本:

<input type="range" min="0" max="100" value="50" id="rangeSlider">

<p>Value: <span id="sliderValue">50</span></p>

在 JavaScript 中，可以获取并更新这个文本。下面的代码会将值在滑块值更改时更新：

var slider = document.getElementById("rangeSlider");

var output = document.getElementById("sliderValue");
output.innerHTML = slider.value;
slider.oninput = function() {
  output.innerHTML = this.value;
}

请注意，这里使用的是 oninput 事件而不是 onchange 事件。这是因为 oninput 事件会在滑块值更改时实时触发，而 onchange 事件会在滑块失去焦点时触发，也就是说在拖动滑块期间不会触发。

总结

在本文中，我们介绍了如何使用 HTML、CSS 和 JavaScript 创建自定义范围滑块。我们了解了基本的 HTML 代码和 CSS 样式，以及如何使用 JavaScript 进行自定义操作。现在您可以尝试创建自己的范围滑块，并将它们嵌入到您的网站中。