基础 CSS 原生范围滑块

简介

CSS 原生范围滑块是一个 HTML 元素的表单控件，它让用户可以从一个值的范围中选择一个单一的值或一个范围。范围滑块有两个拖动条，一个用于选择最小值，一个用于选择最大值，用户可以通过拖动滑块来调整选择的范围。

范围滑块在 Web 开发中很常用，例如在商业网站上选择价格范围，或选择时间范围等。

范围滑块有很多样式和配置选项，可以通过 CSS 自定义。

示例代码

<!-- HTML 代码 -->
<input type="range" id="price" name="price" min="0" max="100" value="50">

/* CSS 代码 */
input[type="range"] {
  -webkit-appearance: none; /* 清除默认样式 */
  width: 100%; /* 宽度 100% */
  height: 20px; /* 统一高度 */
  background-color: #ddd; /* 背景颜色 */
  border-radius: 10px; /* 边框圆角 */
}

input[type="range"]::-webkit-slider-runnable-track {
  background-color: #0071c5; /* 进度条背景颜色 */
  height: 10px; /* 进度条高度 */
  border-radius: 5px; /* 进度条圆角 */
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* 清除默认样式 */
  width: 20px; /* 滑块宽度 */
  height: 20px; /* 滑块高度 */
  border-radius: 50%; /* 滑块圆形 */
  background-color: #0071c5; /* 滑块颜色 */
  box-shadow: 0 0 5px rgba(0,0,0,0.3); /* 滑块阴影 */
  margin-top: -5px; /* 滑块垂直居中 */
}

input[type="range"]::-webkit-slider-thumb:first-of-type {
  margin-left: -10px; /* 第一个滑块左侧偏移 10px */
}

input[type="range"]::-webkit-slider-thumb:last-of-type {
  margin-left: 10px; /* 最后一个滑块右侧偏移 10px */
}

解释说明

这是一个基本的 CSS 原生范围滑块示例代码，包含一个 HTML 元素和一些 CSS 样式。

以下是代码的解释说明：

HTML 代码

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

以上代码创建了一个范围滑块表单控件，具有以下属性：

• type="range"：表明这是一个范围滑块控件。
• id="price"：为控件指定一个唯一的 ID。
• name="price"：为控件指定名称。
• min="0"：这个范围滑块的最小值为 0。
• max="100"：这个范围滑块的最大值为 100。
• value="50"：这个范围滑块的初始值为 50。

CSS 代码

input[type="range"] {
  /* 清除默认样式 */
  -webkit-appearance: none;

  /* 宽度 100% */
  width: 100%;

  /* 统一高度 */
  height: 20px;

  /* 背景颜色 */
  background-color: #ddd;

  /* 边框圆角 */
  border-radius: 10px;
}

input[type="range"]::-webkit-slider-runnable-track {
  /* 进度条背景颜色 */
  background-color: #0071c5;

  /* 进度条高度 */
  height: 10px;

  /* 进度条圆角 */
  border-radius: 5px;
}

input[type="range"]::-webkit-slider-thumb {
  /* 清除默认样式 */
  -webkit-appearance: none;

  /* 滑块宽度 */
  width: 20px;

  /* 滑块高度 */
  height: 20px;

  /* 滑块圆形 */
  border-radius: 50%;

  /* 滑块颜色 */
  background-color: #0071c5;

  /* 滑块阴影 */
  box-shadow: 0 0 5px rgba(0,0,0,0.3);

  /* 滑块垂直居中 */
  margin-top: -5px;
}

input[type="range"]::-webkit-slider-thumb:first-of-type {
  /* 第一个滑块左侧偏移 10px */
  margin-left: -10px;
}

input[type="range"]::-webkit-slider-thumb:last-of-type {
  /* 最后一个滑块右侧偏移 10px */
  margin-left: 10px;
}

以上代码为自定义 CSS 样式，用来美化范围滑块的外观。

以下是各个 CSS 样式的详细解释说明：

• input[type="range"]：表示在 Chrome 浏览器上清除范围滑块自带的样式。
• input[type="range"]::-webkit-slider-runnable-track：表示滑块上面的背景色，这里设置为蓝色。
• input[type="range"]::-webkit-slider-thumb：表示想要美化的滑块的内部样式。
• input[type="range"]::-webkit-slider-thumb:first-of-type：表示第一个滑块的样式，这里偏移了一下。
• input[type="range"]::-webkit-slider-thumb:last-of-type：表示最后一个滑块的样式，这里也偏移了一下。

总结

通过这个基础的 CSS 原生范围滑块示例代码，你可以了解到范围滑块的基本使用方式和一些自定义样式设置。你也可以根据实际需要对样式进行更多的自定义，使其在你的网站或应用程序中更好地呈现。