基础 CSS 滑块两个手柄

CSS 滑块（Slider）是一种用于选择数值范围的 UI 元素，通常用于设置选项、过滤数据等场景。而基础 CSS 滑块两个手柄是在传统滑块基础上增加了两个手柄，可以同时选择两个数值范围。

实现方法

实现基础 CSS 滑块两个手柄需要掌握以下知识点：

• 使用 HTML <input> 元素创建滑块
• 使用 CSS 样式修改滑块样式
• 使用 JavaScript 获取和设置滑块数据

下面就来详细介绍实现方法。

HTML

对于 HTML，我们需要使用 <input> 元素创建一个滑块。首先，需要添加 type="range" 属性来声明这是一个滑块，然后添加 min 和 max 属性来设置数值范围。最后，我们需要添加 value 属性来设置滑块的默认值。

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

CSS

在 CSS 中，我们可以使用伪元素 ::-webkit-slider-thumb 和 ::-moz-range-thumb 分别来描述 Chrome 和 Firefox 浏览器的滑块样式。使用伪元素 ::-webkit-slider-runnable-track 和 ::-moz-range-track 分别描述 Chrome 和 Firefox 浏览器滑块的轨道样式。我们还可以使用 ::-webkit-slider-thumb 和 ::-moz-range-thumb 来设置滑块的大小、边框样式、背景色等。

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background-color: white;
  border: 1px solid gray;
  border-radius: 50%;
  box-shadow: 0 0 5px gray;
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background-color: white;
  border: 1px solid gray;
  border-radius: 50%;
  box-shadow: 0 0 5px gray;
}

input[type="range"]::-webkit-slider-runnable-track {
  background-color: lightgray;
  height: 10px;
  border-radius: 5px;
}

input[type="range"]::-moz-range-track {
  background-color: lightgray;
  height: 10px;
  border-radius: 5px;
}

JavaScript

在 JavaScript 中，我们可以使用 value 属性来获取和设置滑块的数据。获取滑块的数据可以使用 input 事件，监听滑块的拖动，并通过 e.target.value 来获取当前拖动的数值。设置滑块的数据可以通过 Element.value 来设置滑块默认值。

const slider = document.querySelector('input[type="range"]');
slider.addEventListener('input', (e) => {
  console.log(`当前滑块数值为：${e.target.value}`);
});
slider.value = 50;

总结

上面就是基础 CSS 滑块两个手柄的详细介绍，要实现基础 CSS 滑块两个手柄，我们需要掌握 HTML <input> 元素、CSS 样式、JavaScript 事件等相关知识点。希望本文对你有所帮助。