## Slider Permet de sélectionner une valeur au sein d'un intervalle. ### Usage La valeur est affichée lorsque le slider est utilisé. :::demo Vous pouvez décider de la valeur initiale en initialisant la variable liée. ```html ``` ::: ### Valeurs discrètes Les valeurs peuvent être discrètes. :::demo Réglez le pas avec l'attribut `step`. Vous pouvez affiché chaque point grâce à `show-stops`. ```html ``` ::: ### Slider avec champ d'input Vous pouvez afficher un champ d'input synchronisé pour entrer une valeur précise rapidement. :::demo Ajoutez l'attribut `show-input` pour ajouter le champ à droite du Slider. ```html ``` ::: ### Sélectionner une intervalle Vous pouvez sélectionner des intervalles de valeurs au lieu d'une valeur unique. :::demo Ajouter l'attribut `range` active le mode intervalle, ou la valeur sera maintenant un tableau contenant les deux valeurs de l'intervalle. ```html ``` ::: ### Mode vertical :::demo Ajoutez l'attribut `vertical` active le mode vertical. Dans ce mode, l'attribut `height` est requis. ```html ``` ::: ## Attributs | Attribut | Description | Type | Valeurs acceptées | Défaut | |---------- |-------------- |---------- |-------------------------------- |-------- | | value / v-model | La valeur liée. | number | — | 0 | | min | Valeur minimale. | number | — | 0 | | max | Valeur maximale. | number | — | 100 | | disabled | Si le Slider est désactivé. | boolean | — | false | | step | La taille du pas. | number | — | 1 | | show-input | Si une champ d'input doit être affiché, ne marche que si `range` est `false`. | boolean | — | false | | show-input-controls | Si des boutons de contrôle doivent être affichés quand `show-input` est `true`. | boolean | — | true | | input-size | Taille du champ d'input. | string | large / medium / small / mini | small | | show-stops | Si les points de valeurs discrètes doivent être affichés. | boolean | — | false | | show-tooltip | Si le tooltip doit être affiché. | boolean | — | true | | format-tooltip | Format du contenu du tooltip. | function(value) | — | — | | range | Si le mode intervalle est activé. | boolean | — | false | | vertical | Si le mode vertical est activé. | boolean | — | false | | height | Hauteur du Slider, requis en mode vertical. | string | — | — | | label | Label pour les lecteurs d'écran. | string | — | — | | debounce | Délai après écriture en millisecondes, marche quand `show-input` est `true`. | number | — | 300 | | tooltip-class | Classe du tooltip. | string | — | — | ## Évènements | Nom | Description | Paramètres | |---------- |-------- |---------- | | change | Se déclenche quand la valeur change (si le changement est fait à la souris, se déclenche quand la souris redevient immobile). | La nouvelle valeur. |