L'input slider est une version avancée et hautement configurable de l'input HTML natif range. Quelques ajouts notables par rapport à l'input range standard sont :
Si vous êtes familier avec l'utilisation de l'input HTML natif range, vous trouverez que de nombreuses props existantes avec lesquelles vous êtes familier fonctionnent comme prévu avec l'input slider.
Même dans sa forme la plus simple, l'input slider a quelques astuces dans sa manche. Tout comme l'input range natif, vous pouvez utiliser vos touches fléchées pour ajuster la valeur de l'input lorsqu'il est sélectionné — mais avec l'input slider, vous pouvez maintenir la touche shift pour incrémenter par 10x et la touche modificateur de votre système (command ou ctrl) pour sauter aux valeurs min / max.
Chaque fois que vous avez un curseur sélectionné sur un input slider, vous pouvez taper une valeur sur votre clavier et après un léger délai, votre curseur slider sera réglé sur la valeur que vous avez fournie — ou sur le match le plus proche disponible.
Pour afficher deux poignées de valeur sur un input slider, fournissez un tableau comme valeur de l'input. Les poignées de contrôle peuvent être glissées l'une à travers l'autre et la valeur de votre tableau résultant sera toujours retournée triée dans l'ordre du plus petit au plus grand.
En utilisant les slots maxHandleInner (par défaut) et minHandleInner, vous pouvez personnaliser l'apparence de vos poignées slider. Le slot maxHandleInner est utilisé pour les inputs slider à valeur unique.
Par défaut, les bulles d'information slider s'affichent au survol et lorsqu'une poignée de sélection est en train d'être déplacée. Vous pouvez forcer les bulles d'information dans un état activé ou désactivé en utilisant la prop tooltip et en fournissant une valeur booléenne.
En fournissant une fonction à la propriété tooltip-format, vous pouvez personnaliser la valeur de l'infobulle de votre slider. Votre fonction tooltip-format recevra deux arguments :
value : La valeur actuelle qui serait affichée par défaut dans l'infobulle.
handle : Le curseur actuel affecté par la fonction. Soit min, soit max.
En utilisant la propriété tooltip-format, vous pouvez introduire de la variété dans vos entrées de slider — surtout lorsqu'elle est combinée avec le système de propriétés de classe de section de FormKit.
Parfois, une entrée de type plage est plus utile pour les utilisateurs s'ils peuvent également entrer directement des valeurs numériques dans des champs liés. Vous pouvez révéler des entrées number qui sont liées aux valeurs des poignées de la plage du slider en définissant la propriété show-input sur true.
Les entrées number liées sont des entrées de FormKit. Vous pouvez leur appliquer des propriétés en utilisant les propriétés fournies :
input-attrs : liera l'objet que vous fournissez aux entrées min et max.min-input-attrs : Objet à lier à l'entrée min liée.max-input-attrs : Objet à lier à l'entrée max liée.L'entrée slider prend en charge l'affichage de marques sur la piste de l'entrée. En définissant la propriété marks sur true, des marques seront rendues à chaque intervalle de steps.
Vous pouvez activer les étiquettes pour vos marques en définissant la propriété mark-labels sur true.
En fournissant un tableau d'objets à la propriété marks au lieu d'un booléen, vous pouvez placer des marques arbitraires sur la piste du curseur. Les objets de marque doivent avoir les propriétés suivantes :
at : La position (valeur) sur la piste où la marque doit être rendue.label : L'étiquette à rendre pour la marque si la propriété mark-labels est activée.class : Une chaîne de classes à appliquer à l'élément de marque.labelClasses : Une chaîne de classes à appliquer à l'élément d'étiquette de la marque.Lorsque vous fournissez des marques personnalisées, vous pouvez vouloir forcer la sélection à s'accrocher aux marques fournies. Cela peut être réalisé avec la propriété snap-to-marks. Lorsque snap-to-marks est true, les événements clavier sauteront à la marque la plus proche et les valeurs entrées via le clavier ou les entrées liées s'accrocheront à la marque disponible la plus proche.
Vous pouvez appliquer des classes personnalisées à vos marques et étiquettes de marques en utilisant les propriétés class et labelClasses sur vos objets de marque.
Par défaut, l'entrée slider met à l'échelle les valeurs de manière linéaire sur toute sa plage. Cependant, vous pouvez utiliser les propriétés scaling-function ou intervals pour modifier ce comportement.
La propriété scaling-function accepte 3 valeurs :
linear — c'est le comportement par défautlog qui appliquera une fonction de mise à l'échelle logarithmique à votre sliderforward et reverse qui appliqueront votre propre logique de mise à l'échelle.La propriété intervals accepte un tableau d'objets où chaque objet définit une plage d'intervalle sur le slider. Chaque objet contient :
value : Le point sur le slider où l'intervalle commencestep : La taille de pas qui devrait être utilisée à l'intérieur de l'intervalleVotre dernier intervalle couvrira la plage s'étendant de votre value spécifiée à la valeur de la propriété max sur votre slider. Si votre intervalle le plus bas ne commence pas à la valeur minimale possible de votre slider, alors un intervalle couvrant la plage de votre propriété min du curseur à votre premier intervalle sera créé pour vous. Sa valeur step sera la valeur de la propriété step sur votre entrée slider.
Il est important de noter que la représentation visuelle des intervalles sur une piste de slider est basée sur le nombre total de pas possibles à l'intérieur d'un intervalle donné et non sur la valeur numérique brute de l'intervalle.
Vous pouvez afficher un graphique en barres au-dessus du curseur avec des valeurs arbitraires en fournissant un tableau à la propriété chart. Le tableau chart a une structure similaire au tableau marks. Chaque objet imbriqué doit contenir :
at : La position (valeur) sur la piste où la barre pour le graphique doit être rendue.value : Une valeur numérique qui sera utilisée pour calculer la hauteur relative de la barre dans le graphique.L'entrée slider itérera sur votre tableau chart et déterminera la plus grande value contenue dans le tableau, puis divisera toutes les autres valeurs par cette plus grande valeur pour déterminer les hauteurs relatives pour le rendu des barres du graphique.
En combinant les props fournies pour le composant slider, vous pouvez créer une entrée robuste pour couvrir une variété de cas d'utilisation. Voici un exemple pour un curseur de sélection de gamme de prix.
| Prop | Type | Par défaut | Description |
|---|---|---|---|
| chart | array | none | Un tableau d'objets contenant les clés at et value. Affiche un graphique en barres de hauteur relative au-dessus de la piste du curseur. |
| input-attrs | object | {} | Applique des attributs personnalisés aux entrées FormKit liées imbriquées pour les valeurs min et max. |
| intervals | array | none | Un tableau de valeurs d'intervalle composé de value et step utilisé pour définir une échelle différente pour différentes sections de la piste du curseur. |
| marks | boolean || array | false | Lorsque true, affiche des marques sur la piste à chaque valeur de step. Lorsqu'un tableau d'objets avec les clés at et label, affiche une marque sur la piste à la valeur at de chaque objet. |
| mark-labels | boolean | false | Active l'affichage des étiquettes sous les marques sur la piste |
| max | number | 100 | La valeur maximale possible de la gamme du curseur. |
| max-input-attrs | object | {} | Applique des attributs personnalisés à l'entrée FormKit liée imbriquée pour la valeur max. |
| min | number | 0 | La valeur minimale possible de la gamme du curseur. |
| min-input-attrs | object | {} | Applique des attributs personnalisés à l'entrée FormKit liée imbriquée pour la valeur min. |
| prefix | string | none | Caractères qui apparaîtront toujours au début de l'entrée. |
| scaling-function | string || object | linear | Définit le comportement de mise à l'échelle pour les valeurs sur la piste du curseur en utilisant soit une chaîne de valeur prédéfinie soit un ensemble de fonctions personnalisées. |
| show-input | boolean | false | Affiche des entrées FormKit type="number" qui sont liées aux valeur(s) du curseur |
| snap-to-marks | boolean | false | Lorsqu'activé, force la sélection de l'utilisateur à se fixer aux marques |
| step | number | 1 | La valeur minimale à laquelle la valeur du curseur peut s'incrémenter / se décrémenter. |
| suffix | string | none | Caractères qui apparaîtront toujours à la fin de l'entrée. |
| tooltip | boolean | none | Lorsqu'il est défini avec une valeur booléenne, force l'affichage de l'infobulle de la poignée du curseur. |
| tooltip-format | function | none | Une fonction à laquelle est fournie la value et la handle pour chaque poignée du curseur qui doit retourner une string. |
| Afficher Universel props | |||
| config | Object | {} | Options de configuration à fournir au nœud d'entrée et à tout nœud descendant de cette entrée. |
| delay | Number | 20 | Nombre de millisecondes à attendre avant que la valeur d'une entrée ne soit déclenchée avant que le commit hook ne soit déclenché. |
| dirtyBehavior | string | touched | Détermine comment le drapeau "dirty" de cette entrée est défini. Peut être défini sur touched ou compare — touched (par défaut) est plus performant, mais ne détectera pas lorsque le formulaire correspond à nouveau à son état initial. |
| errors | Array | [] | Tableau de chaînes à afficher comme messages d'erreur sur ce champ. |
| help | String | '' | Texte pour le texte d'aide associé à l'entrée. |
| id | String | input_{n} | L'identifiant unique de l'entrée. Fournir un identifiant permet également d'accéder globalement au nœud de l'entrée. |
| ignore | Boolean | false | Empêche une entrée d'être incluse dans un parent (groupe, liste, formulaire, etc). Utile lors de l'utilisation d'entrées pour l'interface utilisateur au lieu de valeurs réelles. |
| index | Number | undefined | Permet d'insérer une entrée à l'index donné si le parent est une liste. Si la valeur de l'entrée est indéfinie, elle hérite de la valeur de cette position d'index. Si elle a une valeur, elle l'insère dans les valeurs de la liste à l'index donné. |
| label | String | '' | Texte pour l'élément label associé à l'entrée. |
| name | String | input_{n} | Le nom de l'entrée tel qu'identifié dans l'objet de données. Cela doit être unique au sein d'un groupe de champs. |
| parent | FormKitNode | contextual | Par défaut, le parent est un groupe d'enrobage, une liste ou un formulaire — mais cette propriété permet une affectation explicite du nœud parent. |
| prefix-icon | String | '' | Spécifie une icône à placer dans la section prefixIcon. |
| preserve | boolean | false | Conserve la valeur de l'entrée sur un groupe parent, une liste ou un formulaire lorsque l'entrée est démontée. |
| preserve-errors | boolean | false | Par défaut, les erreurs définies sur les entrées à l'aide de setErrors sont automatiquement effacées lors de l'entrée, en définissant cette propriété sur true, l'erreur est maintenue jusqu'à ce qu'elle soit explicitement effacée. |
| sections-schema | Object | {} | Un objet de clés de section et de valeurs partielles de schéma, où chaque partie de schéma est appliquée à la section respective. |
| suffix-icon | String | '' | Spécifie une icône à placer dans la section suffixIcon. |
| type | String | text | Le type d'entrée à afficher à partir de la bibliothèque. |
| validation | String, Array | [] | Les règles de validation à appliquer à l'entrée. |
| validation-visibility | String | blur | Détermine quand afficher les règles de validation en échec d'une entrée. Les valeurs valides sont blur, dirty et live. |
| validation-label | String | {label prop} | Détermine quelle étiquette utiliser dans les messages d'erreur de validation, par défaut, elle utilise la propriété label si elle est disponible, sinon elle utilise la propriété name. |
| validation-rules | Object | {} | Règles de validation personnalisées supplémentaires à rendre disponibles pour la propriété de validation. |
| value | Any | undefined | Initialise la valeur initiale d'une entrée et/ou de ses enfants. Non réactif. Peut initialiser des groupes entiers (formulaires) et des listes.. |
Vous pouvez cibler une section spécifique d'une entrée en utilisant la "key" de cette section, ce qui vous permet de modifier les classes de cette section, le HTML (via :sections-schema) ou le contenu (via des emplacements)). En savoir plus sur les sections ici.
| Section-key | Description |
|---|---|
| chart | Un conteneur pour les éléments de la barre de graphique. |
| chartBar | Une barre individuelle pour l'élément de graphique. |
| fill | Le remplissage pour la plage sélectionnée sur le curseur. |
| handleMax | La poignée de sélection de la valeur maximale. C'est la poignée par défaut pour les curseurs à valeur unique. |
| handleMin | La poignée de sélection de la valeur minimale. |
| handles | Un conteneur pour les poignées de sélection de la piste. |
| linkedValues | Un enveloppe pour les entrées liées pour les valeurs minimale et maximale du curseur. |
| mark | Une marque individuelle sur la piste. |
| markLabel | L'étiquette pour une marque individuelle sur la piste. |
| marks | Un conteneur pour toutes les marques sur la piste. |
| maxValue | L'entrée numérique FormKit liée pour la valeur maximale du curseur. Si le curseur n'a qu'une seule valeur, ceci est rendu en tant que descendant direct de la section sliderInner. |
| minValue | L'entrée numérique FormKit liée pour la valeur minimale du curseur. |
| sliderInner | La div intérieure qui contient le contenu de l'entrée du curseur. |
| track | Un enveloppe qui contient tout le balisage de la piste pour l'entrée du curseur. |
| trackInner | Un enveloppe intérieur pour des fins de style qui contient tout le balisage de la piste à l'exception du graphique. |
| trackWrapper | Un enveloppe qui contient tout le balisage de la piste à l'exception du graphique. |
| tooltipMin | L'infobulle pour la poignée de sélection de la valeur minimale. |
| tooltipMax | L'infobulle pour la poignée de sélection de la valeur maximale. |
| Afficher Universel section keys | |
| outer | L'élément d'enrobage le plus externe. |
| wrapper | Un enrobage autour de l'étiquette et de l'entrée. |
| label | L'étiquette de l'entrée. |
| prefix | N'a pas de sortie par défaut, mais permet du contenu directement avant un élément d'entrée. |
| prefixIcon | Un élément pour afficher une icône avant la section de préfixe. |
| inner | Un enrobage autour de l'élément d'entrée réel. |
| suffix | N'a pas de sortie par défaut, mais permet du contenu directement après un élément d'entrée. |
| suffixIcon | Un élément pour afficher une icône après la section de suffixe. |
| input | L'élément d'entrée lui-même. |
| help | L'élément contenant le texte d'aide. |
| messages | Un enrobage autour de tous les messages. |
| message | L'élément (ou plusieurs éléments) contenant un message — le plus souvent des messages de validation et d'erreur. |
Tous les champs de saisie FormKit sont conçus en tenant compte des considérations d'accessibilité suivantes. Aidez-nous à améliorer continuellement l'accessibilité pour tous en signalant les problèmes d'accessibilité ici :
| Clé de Section | Attribut | Par défaut | Description |
|---|---|---|---|
| maxValue | tabindex | -1 | Priorise l'ordre de focus au clavier en le définissant à -1 lorsque l'entrée est désactivée. |
| minValue | tabindex | -1 | Priorise l'ordre de focus au clavier en le définissant à -1 lorsque l'entrée est désactivée. |
| handleMax | tabindex | -1 or 0 | Priorise l'ordre de focus au clavier en le définissant à -1 lorsque l'entrée est désactivée et à 0 lorsqu'elle ne l'est pas. |
| handleMin | tabindex | -1 or 0 | Priorise l'ordre de focus au clavier en le définissant à -1 lorsque l'entrée est désactivée et à 0 lorsqu'elle ne l'est pas. |
| Afficher Universel clé de section | |||
| label | label | for | Associe cela à un élément de saisie, améliorant l'accessibilité et l'expérience utilisateur |
| input | input | disabled | Désactive un élément HTML, empêchant l'interaction de l'utilisateur et signalant un état non interactif |
| aria-describedby | Améliore l'accessibilité en associant un élément à une description, facilitant la lecture par les lecteurs d'écran | ||
| aria-required | Ajoute l'état requis lorsque la validation est requise. | ||
| icon | icon | for | Chaque fois qu'une icône est définie comme libellé, elle la relie à un élément de saisie, améliorant l'accessibilité et l'expérience utilisateur |
| Événement clavier | Description |
|---|---|
| Tab | Déplace le focus vers la prochaine entrée pouvant être ciblée sur la page. |
| Shift + Tab | Déplace le focus vers l'entrée précédente pouvant être ciblée sur la page. |