Comment créer : glisseur de plage de valeurs

Créer un glisseur de plage de valeurs

Première étape - Ajouter HTML :

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

Deuxième étape - Ajouter CSS :

.slidecontainer {
  width: 100%; /* Largeur du conteneur externe */
}
/* Le glisseur lui-même */
.slider {
  -webkit-appearance: none;  /* Couvrir les styles CSS par défaut */
  appearance: none;
  width: 100%; /* Largeur pleine */
  height: 25px; /* Hauteur spécifiée */
  background: #d3d3d3; /* Fond gris */
  outline: none; /* Supprimer le contour */
  opacity: 0.7; /* Définir la transparence (utilisé pour l'effet au survol de la souris) */
  -webkit-transition: .2s; /* Effet de transition de 0.2 secondes */
  transition: opacity .2s;
}
/* Effet au survol de la souris */
.slider:hover {
  opacity: 1; /* Affichage complet au survol de la souris */
}
/* Poignée de glissière (utilise -webkit- (Chrome, Opera, Safari, Edge) et -moz- (Firefox) pour couvrir l'apparence par défaut) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Couvrir l'apparence par défaut */
  appearance: none;
  width: 25px; /* Définir une largeur spécifique du curseur glissant */
  height: 25px; /* Hauteur du curseur glissant */
  background: #04AA6D; /* Fond vert */
  cursor: pointer; /* Curseur de souris au survol */
}
.slider::-moz-range-thumb {
  width: 25px; /* Définir une largeur spécifique du curseur glissant */
  height: 25px; /* Hauteur du curseur glissant */
  background: #04AA6D; /* Fond vert */
  cursor: pointer; /* Curseur de souris au survol */
}

Essayez-le vous-même

Étape 3 - Ajouter JavaScript :

Créez un curseur glissant dynamique en JavaScript pour afficher la valeur actuelle :

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // Afficher la valeur par défaut du curseur glissant
// Mettre à jour la valeur actuelle du curseur glissant (à chaque glissement de la poignée du curseur)
slider.oninput = function() {
  output.innerHTML = this.value;
}

Essayez-le vous-même

Curseur glissant circulaire

Pour créer une poignée de curseur glissant circulaire, utilisez border-radius Propriétés.

Astuce :Si vous souhaitez des hauteurs inégales (dans cet exemple, 15 pixels et 25 pixels), définissez la hauteur du curseur glissant différemment de celle du pouce glissant :

Exemple

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

Essayez-le vous-même

Icône/image glissante

Pour créer une poignée de curseur glissant avec un icône/image, utilisez background Insérer l'URL de l'image en utilisant les

Exemple

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

Essayez-le vous-même