如何创建：范围滑块

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

默认：

方块：

圆点：

图像：

值：

Try it yourself

创建范围滑块

第一步 - 添加 HTML：

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>

第二步 - 添加 CSS：

.slidecontainer {
  width: 100%; /* 外部容器的宽度 */
{}
/* The slider itself */
.slider {
  -webkit-appearance: none;  /* 覆盖默认 CSS 样式 */
  appearance: none;
  width: 100%; /* 全宽 */
  height: 25px; /* 指定的高度 */
  background: #d3d3d3; /* 灰色背景 */
  outline: none; /* 移除轮廓 */
  opacity: 0.7; /* 设置透明度（用于鼠标悬停时的鼠标悬停效果） */
  -webkit-transition: .2s; /* 0.2秒的过渡效果 */
  transition: opacity .2s;
{}
/* 鼠标悬停效果 */
.slider:hover {
  opacity: 1; /* 鼠标悬停时完全显示 */
{}
/* 滑块手柄（使用 -webkit-（Chrome、Opera、Safari、Edge）和 -moz-（Firefox）来覆盖默认外观） */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* 覆盖默认外观 */
  appearance: none;
  width: 25px; /* Specifieke breedte van de schuifpotloodgrendel */
  height: 25px; /* Hoogte van de schuifpotloodgrendel */
  background: #04AA6D; /* Groene achtergrond */
  cursor: pointer; /* Cursor bij hover */
{}
.slider::-moz-range-thumb {
  width: 25px; /* Specifieke breedte van de schuifpotloodgrendel */
  height: 25px; /* Hoogte van de schuifpotloodgrendel */
  background: #04AA6D; /* Groene achtergrond */
  cursor: pointer; /* Cursor bij hover */
{}

Try it yourself

Derde stap - Voeg JavaScript toe:

Maak een dynamische bereiksschuifpotlood met JavaScript om de huidige waarde weer te geven:

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // Toon de standaard waarde van de schuifpotloodgrendel
// Update de huidige waarde van de schuifpotloodgrendel (bij elke trekking van de vinger van de schuifpotloodgrendel)
slider.oninput = function() {
  output.innerHTML = this.value;
{}

Try it yourself

Ronde schuifpotloodgrendel

Om een ronde schuifpotloodgrendel te maken, gebruik dan: border-radius eigenschappen.

Tip:Als je een ongelijke hoogte wilt (in dit voorbeeld 15 pixels en 25 pixels), stel dan de hoogte van de schuifpotloodgrendel in op een andere waarde dan de vinger van de schuifpotloodgrendel:

Voorbeeld

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;  
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
{}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%; 
  background: #04AA6D;
  cursor: pointer;
{}
.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
{}

Try it yourself

Schuifpotloodpictogram/afbeelding

Om een schuifpotloodgrendel met een pictogram/afbeelding te maken, gebruik dan: achtergrond Voeg de eigenschappen toe en voeg de afbeeldings-URL in:

Voorbeeld

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 23px;
  height: 24px;
  border: 0;
  background: url('contrasticon.png');
  cursor: pointer;
{}
.slider::-moz-range-thumb {
  width: 23px;
  height: 25px;
  border: 0;
  background: url('contrasticon.png');
  cursor: pointer;
{}

Try it yourself