基础 CSS 滑块基础知识

什么是 CSS 滑块？

CSS 滑块（Slider）是一个用户界面组件，允许用户通过拖动滑块的位置在特定范围内选择数字或值。CSS 滑块可以使用在表单，图表，警告等场景中。

CSS 滑块可以分为两种类型：单点滑块和范围滑块。单点滑块允许用户在一个特定的数值范围内选择一个值，而范围滑块允许用户在两个数值范围内选择一对值。

CSS 滑块的基本结构

要创建一个基本的 CSS 滑块，我们需要使用 HTML 表单元素和 CSS 样式。

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

上面的代码段创建了一个最小值为 0，最大值为 100，初始值为 50 的单点滑块。为了让滑块更具体，我们需要添加一些 CSS 样式。

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #ddd;
  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: 15px;
  height: 15px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

上面的 CSS 样式根据滑块的输入类型和类名选择器定义滑块和滑块拇指子元素。这些样式包括：

• -webkit-appearance：消除滑块的默认样式。
• background：定义滑块和滑块的显示方式。
• outline：消除聚焦时的默认样式。
• opacity：定义透明度。
• cursor：定义鼠标悬停时的光标。
• transition：定义过渡属性。

范围滑块

如果需要创建范围滑块，我们可以通过添加 min 和 max 属性来定义滑块的数值范围。

<input type="range" min="0" max="100" value="25" class="slider">
<input type="range" min="0" max="100" value="75" class="slider">

上面的代码段创建了两个滑块，分别表示了范围为 0-100 中的两个数值。

自定义 CSS 滑块

如果需要自定义 CSS 滑块的样式，我们可以使用伪元素和 CSS 属性来实现。

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  background-image: url('path/to/image.jpg');
  background-size: 100% 100%;
  border-radius: 0;
}

.slider::-moz-range-thumb {
  width: 30px;
  height: 30px;
  background-image: url('path/to/image.jpg');
  background-size: 100% 100%;
  border-radius: 0;
}

上面的 CSS 样式自定义了滑块拇指的样式，包括：

• background-image：使用自定义图片作为滑块拇指。

结论

本文中，我们学习了 CSS 滑块的基本知识，并且我们看到了如何创建一个基本的单点滑块和范围滑块，以及如何自定义 CSS 滑块的样式。