Hur man skapar: Räckviddsreglage

Skapa en räckviddsreglage

Steg 1 - Lägg till HTML:

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

Steg 2 - Lägg till CSS:

.slidecontainer {
  width: 100%; /* Yttre kont容器的 bredd */
}
/* Glidaren själv */
.slider {
  -webkit-appearance: none;  /* Överkryssar standard CSS-stil */
  appearance: none;
  width: 100%; /* Full bredd */
  height: 25px; /* Angiven höjd */
  background: #d3d3d3; /* Grå bakgrund */
  outline: none; /* Ta bort kontur */
  opacity: 0.7; /* Ställ in genomskinlighet (används för muspekareseffekt) */
  -webkit-transition: .2s; /* 0.2 sekunders övergångseffekt */
  transition: opacity .2s;
}
/* Muspekareseffekt */
.slider:hover {
  opacity: 1; /* Fullt synligt vid muspekare */
}
/* Glidhandtag (använder -webkit- (Chrome, Opera, Safari, Edge) och -moz- (Firefox) för att överskriva standardutseendet) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Överkryssar standardutseendet */
  appearance: none;
  width: 25px; /* Ange specifik bredd på rullgardinsdraghanden */
  height: 25px; /* Höjd på rullgardinsdraghanden */
  background: #04AA6D; /* Grön bakgrund */
  cursor: pointer; /* Muspekarens form när musen är över elementet */
}
.slider::-moz-range-thumb {
  width: 25px; /* Ange specifik bredd på rullgardinsdraghanden */
  height: 25px; /* Höjd på rullgardinsdraghanden */
  background: #04AA6D; /* Grön bakgrund */
  cursor: pointer; /* Muspekarens form när musen är över elementet */
}

Prova själv

Steg 3 - Lägg till JavaScript:

Skapa en dynamisk rullgardin med JavaScript för att visa det aktuella värdet:

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // Visa det förvalda rullgardinsvärdet
// Uppdatera den aktuella rullgardinsvärdet (varje gång du drar tumknappen för rullgardinen)
slider.oninput = function() {
  output.innerHTML = this.value;
}

Prova själv

Rund rullgardin

För att skapa en rund draghand för rullgardin, använd border-radius egenskaper.

Tips:Om du vill ha olik höjd (i detta exempel 15 pixlar och 25 pixlar), sätt rullgardins höjd till ett annat värde än tumknappen:

Exempel

.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;
}

Prova själv

Rullgardinikong/bild

För att skapa en draghand för rullgardin med ikon/bild, använd background Använd egenskaper och infoga bild-URL:

Exempel

.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;
}

Prova själv