L'entrée slider est une version avancée et hautement configurable de l'entrée HTML native range. Certaines ajouts notables par rapport à l'entrée range standard sont :
Si vous êtes familier avec l'utilisation de l'entrée HTML native range, vous constaterez que bon nombre des props existantes que vous connaissez fonctionnent comme prévu avec l'entrée slider.
Même dans sa forme la plus simple, l'entrée slider a quelques astuces dans sa manche. Tout comme l'entrée native range, vous pouvez utiliser les touches fléchées pour ajuster la valeur de l'entrée lorsqu'elle est focalisée - mais avec l'entrée slider, vous pouvez maintenir la touche shift pour incrémenter de 10x et la touche de modification de votre système (command ou ctrl) pour passer aux valeurs min / max.
Lorsque vous avez une poignée focalisée sur une entrée slider, vous pouvez taper une valeur sur votre clavier et après un léger rebond, votre poignée slider sera réglée sur la valeur que vous avez fournie - ou la correspondance la plus proche disponible.
Pour afficher deux poignées de valeur sur une entrée slider, fournissez un tableau comme valeur de l'entrée. Les poignées de contrôle peuvent être glissées l'une à travers l'autre et la valeur du tableau résultant sera toujours renvoyée triée dans l'ordre, du plus petit au plus grand.
Par défaut, les infobulles slider s'affichent au survol et lorsqu'une poignée de sélection est en cours de glissement. Vous pouvez forcer les infobulles dans un état activé ou désactivé en utilisant la prop tooltip et en fournissant une valeur booléenne.
En fournissant une fonction à la prop tooltip-format, vous pouvez personnaliser la valeur de votre infobulle slider. Votre fonction tooltip-format recevra deux arguments :
value: La valeur actuelle qui serait affichée dans l'infobulle par défaut.
handle: La poignée actuelle affectée par la fonction. Soit min ou max.
En utilisant la prop tooltip-format, vous pouvez introduire de la variété dans vos entrées slider - surtout lorsqu'elles sont combinées avec le système de props de classe de section-clé de FormKit.
Parfois, une entrée de style "range" est plus utile pour les utilisateurs s'ils peuvent également entrer directement des valeurs numériques dans des champs liés. Vous pouvez afficher des entrées number liées aux valeurs des poignées de la plage slider en définissant la propriété show-input sur true.
Les entrées number liées sont des entrées FormKit. Vous pouvez leur appliquer des propriétés en utilisant les props fournies :
input-attrs : liera votre objet fourni 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 des é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 à afficher pour la marque si la propriété mark-labels est activée.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 du clavier passeront à la marque la plus proche et les valeurs entrées par le clavier ou les entrées liées s'accrocheront à la marque disponible la plus proche.
Vous pouvez afficher un graphique à 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 du 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 parcourra 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 afficher les 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 plage 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 à 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. |
| marks | boolean || array | false | Lorsque true, affiche des marques sur la piste à chaque valeur de step. Lorsqu'un tableau d'objets avec des clés at et label, affiche une marque sur la piste à chaque valeur at de l'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 plage 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 plage 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. |
| show-input | boolean | false | Affiche les entrées FormKit type="number" qui sont liées aux valeurs du curseur |
| snap-to-marks | boolean | false | Lorsqu'il est activé, force la sélection de l'utilisateur à s'aligner sur les marques |
| step | number | 1 | La valeur minimale à laquelle la valeur du curseur peut s'incrémenter / 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(s) de la poignée du curseur. |
| tooltip-format | function | none | Une fonction qui est fournie avec la value et la handle pour chaque poignée de curseur et 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 graphique. |
| fill | Le remplissage pour la plage sélectionnée sur l'entrée du curseur. |
| handleMax | La poignée de sélection de valeur maximale. C'est la poignée par défaut pour les entrées de curseur à valeur unique. |
| handleMin | La poignée de sélection de valeur minimale. |
| handles | Un conteneur pour les poignées de sélection de la piste |
| linkedValues | Un wrapper 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 de nombre FormKit liée pour la valeur maximale du curseur. Si le curseur n'a qu'une seule valeur, cela est rendu en tant que descendant direct de la section sliderInner. |
| minValue | L'entrée de nombre 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 wrapper qui contient tout le balisage de la piste pour l'entrée du curseur. |
| trackInner | Un wrapper intérieur à des fins de style qui contient tout le balisage de la piste à l'exclusion du graphique. |
| trackWrapper | Un wrapper qui contient tout le balisage de la piste à l'exclusion du graphique. |
| tooltipMin | L'infobulle pour la poignée de sélection de valeur minimale |
| tooltipMax | L'infobulle pour la poignée de sélection de 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. |