Ce champ propose un contenu évalué approximatif.
Bien que l'on puisse convertir la position du curseur numériquement (par défaut la valeur la plus basse est 0, la plus haute 100), l'utilisateur n'a pas de repère numérique, seule la position du curseur est un indice. La valeur la plus haute se trouve à gauche (il fallait le deviner ?) pour un sens de lecture ltr (left to right) bien entendu !
Si vous avez l'habitude de passer d'une lecture rtl à ltr de par votre polyglottisme, cet affichage approximatif pourrait vous poser des soucis (cela reste une supposition), d'autant plus que le curseur se place par défaut au milieu.
Ce type de champ retourne une valeur numérique qui correspond à la position du curseur.
<input type="range">
Si vous ne renseignez rien dans les attributs min et max, et que le curseur de range se trouve au centre (il s'y trouve en valeur initiale au chargement de l'élément), la valeur retournée sera 50 (valeur médiane de l'intervalle 0-100).
iPhone charge un petit slider assez peu utilisable (pour ceux qui n'ont pas des doigts de fée) mais qui ressemble globalement aux autres classiques.
Android 4, sur le navigateur Chrome affiche un contenu identique que sur la version bureau.
À gauche Chrome Mobile Beta sous Android 4 - À droite Safari sur iOS 5
Compatibilité du type range
| Navigateurs | Versions | Détails |
|---|---|---|
 |
Internet Explorer 10 | Affiche un slider graphique. |
 |
Firefox 4 - 10 Firefox Mobile (Android 4) |
Affiche un champ de type text.Affiche un champ de type text avec clavier de type numérique. |
 |
Chrome 10+ Chrome Mobile Beta (Android 4) |
Affiche un slider classique et fin. Affiche un slider quasi identique que sur bureau. |
 |
Opera 11+ Opera Mobile (Android 4) |
Affiche un slider classique et gradué. Affiche un slider quasi identique que sur bureau. |
 |
Safari 5+ |
Affiche un slider classique et fin. Affiche un slider classique et fin. (Safari mobile) |
 |
Android Browser 4 | N'affiche rien. Aucun support. |
Il est possible de contraindre et personnaliser les valeurs retournées par ce type de champ de formulaire.
Pour ce faire, essayons ce code :
<input type="range" value="15" max="50" min="0" step="5">
Vous commencez à connaître ces attributs :)
Ces informations n'apparaissent pas à l'écran comme ça aurait pu être le cas, avec 0 affiché à gauche, et 50 afficher à droite du slider.
Ce type d'élément reste très approximatif, les valeurs que vous récupérerez sont un repère pour vous (statistiques personnelles, estimations, etc.) qui devront tenir compte de cette approximation.
Cependant, chose étonnante, Chrome 16 autorise le contenu généré par CSS sur cet élément précisément.
Aussi, il est possible de récupérer dynamiquement les valeurs de min et max pour les afficher grâce à CSS.
input[type="range"] {
position: relative;
margin-left: 1em;
}
input[type="range"]:after,
input[type="range"]:before {
position: absolute;
top: 1em;
color: #aaa;
}
input[type="range"]:before {
left:0em;
content: attr(min);
}
input[type="range"]:after {
right: 0em;
content: attr(max);
}
Voici une démonstration combinée à un script jQuery pour afficher un output dynamique.
Les attributs compatibles avec ce type de champ sont : name, disabled, form, type, autocomplete, autofocus, list, min, max, step (chiffre à virgule), value, ainsi que les attributs classiques, d'événements et xml.