Sådan oprettes: Række glidebånd

Opret en række glidebånd

Første skridt - Tilføj HTML:

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

Andet skridt - Tilføj CSS:

.slidecontainer {
  width: 100%; /* Eksternt kontainerens bredde */
{}
/* Selv glidebåndet */
.slider {
  -webkit-appearance: none;  /* Dækket standard CSS-stil */
  appearance: none;
  width: 100%; /* Full bredde */
  height: 25px; /* Specificeret højde */
  background: #d3d3d3; /* Grå baggrund */
  outline: none; /* Fjern omrids */
  opacity: 0.7; /* Sæt gennemsigtighed (brugt til museoverførselseffekt) */
  -webkit-transition: .2s; /* 0.2 sekunders overgangseffekt */
  transition: opacity .2s;
{}
/* Museoverførselseffekt */
.slider:hover {
  opacity: 1; /* Fulvisning ved museoverførsel */
{}
/* Glidestak håndtag (brug af -webkit- (Chrome, Opera, Safari, Edge) og -moz- (Firefox) til at dække standardudseende) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Dækket standardudseende */
  appearance: none;
  width: 25px; /* Angiv en bestemt skydehåndtag bredde */
  height: 25px; /* Skydehåndtagets højde */
  baggrund: #04AA6D; /* Grøn baggrund */
  cursor: pointer; /* Markør ved museoverførsel */
{}
.slider::-moz-range-thumb {
  width: 25px; /* Angiv en bestemt skydehåndtag bredde */
  height: 25px; /* Skydehåndtagets højde */
  baggrund: #04AA6D; /* Grøn baggrund */
  cursor: pointer; /* Markør ved museoverførsel */
{}

Try it yourself

Trin 3 - Tilføj JavaScript:

Opret en dynamisk rækkevidde skydekontrol med JavaScript for at vise den aktuelle værdi:

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // Vis standard skydeværdi
// Opdater den aktuelle skydeværdi (hver gang du trækker skydehåndtaget)
slider.oninput = function() {
  output.innerHTML = this.value;
{}

Try it yourself

cirkulær skydehåndtag

For at oprette en cirkulær skydehåndtag, brug border-radius egenskab.

Tip:Hvis du vil have ujævne højder (i dette eksempel 15 pixel og 25 pixel), sæt skydehåndtagets højde til en anden værdi end skydehåndtagets pegefinger:

eksempel

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;  
  baggrund: #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%; 
  baggrund: #04AA6D;
  cursor: pointer;
{}
.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  baggrund: #04AA6D;
  cursor: pointer;
{}

Try it yourself

skydeikon/billede

For at oprette en skydehåndtag med ikon/billede, brug baggrund Indsæt billed-URL:

eksempel

.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