` défini par la classe `fr-range-group`. - Le libellé du curseur, obligatoire, doit être un élément HTML `` avec la classe `fr-label`. - Son attribut `id` doit être associé à l'attribut `aria-labelledby` du curseur. - Une description additionnelle du curseur, optionnelle, peut être ajoutée dans le libellé, elle est définie par un élément `` et la classe utilitaire `fr-hint-text`. - L'élément curseur est contenu dans un élément HTML `

` défini par la classe `fr-range`. - La valeur courante affichée du curseur est un élément HTML `` défini par la classe `fr-range__output`. - Le curseur est un élément HTML `` de type `range` défini par la classe `fr-range__input`. - La valeur par défaut du curseur est définie par l'attribut `value`. - Les valeurs minimales et maximale du curseur autorisées sont définies par les attribut `min` et `max` du curseur. - Le pas du curseur est défini par l'attribut `step`. - Les valeurs minimales et maximales affichées, optionnelles, sont des éléments HTML `` définis par les classes `fr-range__min` et `fr-range__max` et disposant d'un attribut `aria-hidden="true"`. - Un message d'erreur ou de succès peut être associé au curseur en utilisant un élément HTML `

` avec la classe `fr-messages-group` dans lequel on peut ajouter un message `fr-message`. - Son attribut `id` doit être associé à l'attribut `aria-describedby` du curseur. - Ce bloc peut être placé vide et être rempli dynamiquement, auquel cas il doit être annoncé à l'utilisateur en utilisant l'attribut `aria-live="polite"`. **Exemple de structure HTML** ```HTML

Libellé Texte de description additionnel, valeur de 0 à 100.

``` ### CSS #### Installation du CSS Pour fonctionner correctement le style CSS du composant et de ses dépendances doivent être importés. L'import doit se faire avant le contenu de la page dans la partie ``, et de préférence avec les fichiers minifiés, car plus légers. Il est possible d'importer les fichiers CSS avec un niveau de granularité adapté à vos besoins. Voir le découpage des fichiers CSS du DSFR dans la [documentation dédiée](path:/getting-started/developer/get-started#les-css). :::fr-table[Dépendances CSS]{valign=top scroll=false} | Dépendance | Obligatoire | |------------|-------------| | Core | Oui | | Range | Oui | ::: **Exemple d'imports CSS** ```HTML ``` #### Variante de taille Le curseur est disponible en deux variantes de tailles pour s'adapter à différents contextes d'utilisation. Pour appliquer une variante de taille, ajoutez une des classes suivantes à l'élément `

` : - En taille MD : par défaut. - En taille SM : définie par la classe `fr-range--sm`. **Exemple de variante de taille** ```HTML

Libellé

``` #### Variante de curseur cranté Le curseur peut afficher des crans avec l'utilisation de la classe `fr-range--step`. **Exemple de curseur cranté** ```HTML

Libellé

``` #### Variante de curseur avec préfixe et suffixe Le curseur peut afficher des préfixe et suffixe autour des valeurs courante, minimale et maximale avec l'utilisation des attributs `data-fr-prefix` et `data-fr-suffix` sur l'élément `

`. **Exemple de curseur avec préfixe et suffixe** ```HTML

Libellé

``` #### Variantes d'états Les états d'erreur/succès/désactivé sont gérés au niveau du groupe. Pour ajouter un état à un curseur, ajoutez une des classes suivantes : - La classe `fr-range-group--error` : Indique une erreur. - La classe `fr-range-group--valid` : Indique un succès. - L'attribut `fr-range-group--disabled` : Indique un état désactivé. - Dans le cas du curseur désactivé l'ajout de l'attribut `disabled` sur le ou les éléments `` est nécessaire. Un message d'erreur ou de succès doit être ajouté dans un bloc `fr-messages-group` à la fin du groupe du curseur et doit être lié au curseur via un attribut `aria-describedby`. **Exemple de curseur avec erreur** :::fr-accordion[Déplier pour voir le code]{id=code-range-erreur} ```HTML

Libellé Texte de description additionnel, valeur de 0 à 100.

Valeur sélectionnée impossible

``` ::: **Exemple de curseur avec succès** :::fr-accordion[Déplier pour voir le code]{id=code-range-succes} ```HTML

Libellé Texte de description additionnel, valeur de 0 à 100.

Texte de validation

``` ::: **Exemple de curseur désactivée** :::fr-accordion[Déplier pour voir le code]{id=code-range-disabled} ```HTML

Libellé Texte de description additionnel, valeur de 0 à 100.

``` ::: #### Variante de curseur double Le curseur double permet de disposer de deux poignées de selection pour les valeurs minimale et maximale par l'ajout d'un second élément HTML `` de type `range`. **Exemple de curseur double** ```HTML

Libellé Texte de description additionnel, valeur de 0 à 100.

``` --- ### JavaScript #### Installation du JavaScript Pour fonctionner, le composant curseur nécessite l'utilisation de JavaScript. Chaque composant utilisant JavaScript possède un fichier JS spécifique et requiert le fichier JS du core. Il est donc nécessaire d'importer ces fichiers à la fin de la page (avant ``) : ```HTML ``` NB: Il est aussi possible d'importer le Js global du DSFR `dsfr.module.min.js` Pour fonctionner sur Internet Explorer 11, un fichier legacy, en version nomodule ES5, peut aussi être importé : ```HTML ``` Une fois le JavaScript chargé, le composant fonctionne automatiquement. #### Instances Sur le curseur, les éléments suivants sont instanciés : - Le conteneur, via la classe : `fr-range` - Le ou les curseurs dans leur conteneur, via la classe : `fr-range` et les éléments `` de type `` - La valeur courante, via la classe : `fr-range__output` - Les valeurs minimale et maximale, via les classes `fr-range__min` et `fr-range__max` Une fois chargé, le JS ajoute un attribut `data-fr-js-NOM_INSTANCE="true"` sur chacun des éléments instanciés. #### API Il est possible d'interagir avec les instances du composant en JavaScript via une API. Cette API est disponible depuis la méthode `window.dsfr(instance)` du core. Exemple : ```js const elem = document.getElementById('ID_TAB'); dsfr(elem).range.isEnabled; ``` L'ensemble des propriétés et méthodes disponibles sont définies ci-après : ###### range :::fr-table[isEnabled]{valign=top multiline=true} | | | |------|-----| | **Description** | Défini si le fonctionnement du curseur est activé ou non | | **Type** | property | | **Retour** | Boolean | | **Exemple** | `dsfr(elem).range.isEnabled = false` | ::: :::fr-table[node]{valign=top multiline=true} | | | |------|-----| | **Description** | Renvoie le noeud HTML de l'élément. | | **Type** | property | | **Retour** | DOMElement | | **Exemple** | `dsfr(elem).range.node` | ::: ###### rangeInput :::fr-table[value]{valign=top multiline=true} | | | |------|-----| | **Description** | Retourne la valeur courante du curseur. | | **Type** | property | | **Retour** | Number | | **Exemple** | `dsfr(elem).rangeInput.value` | ::: :::fr-table[isEnabled]{valign=top multiline=true} | | | |------|-----| | **Description** | Défini si le fonctionnement du curseur est activé ou non | | **Type** | property | | **Retour** | Boolean | | **Exemple** | `dsfr(elem).rangeInput.isEnabled = false` | ::: :::fr-table[node]{valign=top multiline=true} | | | |------|-----| | **Description** | Renvoie le noeud HTML de l'élément. | | **Type** | property | | **Retour** | DOMElement | | **Exemple** | `dsfr(elem).rangeInput.node` | ::: ###### rangeOutput :::fr-table[isEnabled]{valign=top multiline=true} | | | |------|-----| | **Description** | Défini si le fonctionnement du curseur est activé ou non | | **Type** | property | | **Retour** | Boolean | | **Exemple** | `dsfr(elem).rangeOutput.isEnabled = false` | ::: :::fr-table[node]{valign=top multiline=true} | | | |------|-----| | **Description** | Renvoie le noeud HTML de l'élément. | | **Type** | property | | **Retour** | DOMElement | | **Exemple** | `dsfr(elem).rangeOutput.node` | ::: ###### rangeLimit :::fr-table[isEnabled]{valign=top multiline=true} | | | |------|-----| | **Description** | Défini si le fonctionnement du curseur est activé ou non | | **Type** | property | | **Retour** | Boolean | | **Exemple** | `dsfr(elem).rangeLimit.isEnabled = false` | ::: :::fr-table[node]{valign=top multiline=true} | | | |------|-----| | **Description** | Renvoie le noeud HTML de l'élément. | | **Type** | property | | **Retour** | DOMElement | | **Exemple** | `dsfr(elem).rangeLimit.node` | ::: --- ### Note de version [Voir les évolutions sur github](https://github.com/GouvernementFR/dsfr/pulls?q=is%3Apr+is%3Aclosed+is%3Amerged+range+) ::dsfr-doc-changelog