Comment créer un input range (slider) stylisé dans Webflow ?
Apprenez à styliser un input range dans Webflow avec du CSS personnalisé et afficher la valeur en temps réel.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment styliser un input range (slider) dans Webflow pour le personnaliser entièrement avec du CSS.
Exemple
| Pseudo-élément CSS | Navigateur | Cible |
|---|---|---|
| ::-webkit-slider-thumb | Chrome, Safari, Edge | Le bouton draggable |
| ::-webkit-slider-runnable-track | Chrome, Safari, Edge | La piste du slider |
| ::-moz-range-thumb | Firefox | Le bouton draggable |
| ::-moz-range-track | Firefox | La piste du slider |
1. Ajoutez un input range dans un embed Webflow
Dans un Embed, collez ce HTML. Ajoutez l'ID range-slider et l'ID range-value sur le Text Block qui affiche la valeur.
2. Stylisez le slider avec du CSS
input[type="range"] {
-webkit-appearance: none;
width: 100%;
height: 4px;
border-radius: 4px;
background: #e0e0e0;
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #3b82f6;
cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #3b82f6;
cursor: pointer;
border: none;
}3. Affichez la valeur en temps réel
const slider = document.getElementById('range-slider');
const output = document.getElementById('range-value');
slider.addEventListener('input', function() {
output.textContent = slider.value;
});Conclusion
Un input range stylisé améliore les formulaires interactifs. Cas d'usage :
- Simulateur de budget ou de prix
- Filtre de résultats par valeur numérique
- Jauge de satisfaction dans un formulaire
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
.avif)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
