Come creare: slider a spostamento

Crea lo slider a spostamento

Primo passo - Aggiungi HTML:

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

Secondo passo - Aggiungi CSS:

.slidecontainer {
  width: 100%; /* Larghezza del contenitore esterno */
}
/* Lo slider stesso */
.slider {
  -webkit-appearance: none;  /* Copertura dello stile CSS predefinito */
  appearance: none;
  width: 100%; /* Larghezza completa */
  height: 25px; /* Altezza specificata */
  background: #d3d3d3; /* Sfondo grigio */
  outline: none; /* Rimozione del contorno */
  opacity: 0.7; /* Imposta la trasparenza (usato per l'effetto di hover del mouse) */
  -webkit-transition: .2s; /* Effetto di transizione di 0.2 secondi */
  transition: opacity .2s;
}
/* Effetto di hover del mouse */
.slider:hover {
  opacity: 1; /* Visualizzazione completa quando il mouse è sopra */
}
/* Maniglia dello slider (utilizza -webkit- (Chrome, Opera, Safari, Edge) e -moz- (Firefox) per coprire l'aspetto predefinito) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Copertura dell'aspetto predefinito */
  appearance: none;
  width: 25px; /* larghezza specifica del manico dello slittamento */
  height: 25px; /* altezza del manico dello slittamento */
  background: #04AA6D; /* sfondo verde */
  cursor: pointer; /* cursore a puntatore quando il mouse è sopra */
}
.slider::-moz-range-thumb {
  width: 25px; /* larghezza specifica del manico dello slittamento */
  height: 25px; /* altezza del manico dello slittamento */
  background: #04AA6D; /* sfondo verde */
  cursor: pointer; /* cursore a puntatore quando il mouse è sopra */
}

Prova personalmente

Passo 3 - Aggiungi JavaScript:

Crea uno slittamento di gamma dinamico con JavaScript per visualizzare il valore corrente:

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // Visualizza il valore predefinito dello slittamento
// Aggiorna il valore corrente dello slittamento (ogni volta che si trascina il manico dello slittamento)
slider.oninput = function() {
  output.innerHTML = this.value;
}

Prova personalmente

Slittamento circolare

Per creare un manico di slittamento circolare, utilizzare border-radius proprietà.

Suggerimento:Se desideri altezze diverse (nel presente esempio 15 pixel e 25 pixel), imposta l'altezza del cursore diversa da quella del pollice:

Esempio

.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 personalmente

Icona/Immagine del slittamento

Per creare un manico di slittamento con icona/immagine, utilizzare background Inserisci l'URL dell'immagine nel campo

Esempio

.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 personalmente