Range

L'entrée range utilise l'entrée de plage native HTML pour permettre à l'utilisateur de sélectionner un nombre avec un curseur graphique.

Alternative Pro

Besoin de plus de flexibilité que ce que l'entrée range HTML native offre ? Découvrez l'entrée slider disponible dans FormKit Pro.

Exemple de base

Charger l'exemple en direct

Convertir en nombre

Par défaut, tous les éléments HTML <input> natifs renvoient une valeur de type chaîne de caractères. La propriété number vous permet de convertir la valeur en un véritable type number. Il y a deux valeurs valides pour la propriété number : float et integer.

Ces options utilisent respectivement parseFloat (par défaut) ou parseInt. Si la valeur ne peut pas être analysée par la fonction respective, elle définira la valeur sur undefined. De plus, l'application de la propriété number contraindra la value de l'entrée à être exclusivement number | undefined en TypeScript.

Charger l'exemple en direct

Props & Attributs

L'entrée range a seulement une propriété unique, number, qui peut être utilisée pour convertir la valeur de l'entrée en un type number. De plus, l'entrée de plage HTML native a quelques attributs qui peuvent être utilisés pour contrôler l'entrée.

PropTypePar défautDescription
Commonly used native attributes
minNumber--Voir sur MDN
maxNumber--Voir sur MDN
stepNumberautoVoir sur MDN
Props
numberStringfloatSpécifie comment convertir une valeur en nombre. Les valeurs valides sont float et integer.
Afficher Universel props
configObject{}Options de configuration à fournir au nœud d'entrée et à tout nœud descendant de cette entrée.
delayNumber20Nombre 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é.
dirtyBehaviorstringtouchedDétermine comment le drapeau "dirty" de cette entrée est défini. Peut être défini sur touched ou comparetouched (par défaut) est plus performant, mais ne détectera pas lorsque le formulaire correspond à nouveau à son état initial.
errorsArray[]Tableau de chaînes à afficher comme messages d'erreur sur ce champ.
helpString''Texte pour le texte d'aide associé à l'entrée.
idStringinput_{n}L'identifiant unique de l'entrée. Fournir un identifiant permet également d'accéder globalement au nœud de l'entrée.
ignoreBooleanfalseEmpê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.
indexNumberundefinedPermet 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é.
labelString''Texte pour l'élément label associé à l'entrée.
nameStringinput_{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.
parentFormKitNodecontextualPar 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-iconString''Spécifie une icône à placer dans la section prefixIcon.
preservebooleanfalseConserve la valeur de l'entrée sur un groupe parent, une liste ou un formulaire lorsque l'entrée est démontée.
preserve-errorsbooleanfalsePar 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-schemaObject{}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-iconString''Spécifie une icône à placer dans la section suffixIcon.
typeStringtextLe type d'entrée à afficher à partir de la bibliothèque.
validationString, Array[]Les règles de validation à appliquer à l'entrée.
validation-visibilityStringblurDétermine quand afficher les règles de validation en échec d'une entrée. Les valeurs valides sont blur, dirty et live.
validation-labelString{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-rulesObject{}Règles de validation personnalisées supplémentaires à rendre disponibles pour la propriété de validation.
valueAnyundefinedInitialise la valeur initiale d'une entrée et/ou de ses enfants. Non réactif. Peut initialiser des groupes entiers (formulaires) et des listes..

Sections

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.

Valeur nette
😭
0 $
1B $
💰
Quelle est votre valeur nette approximative ?
Désolé. Notre service est uniquement pour les familles à faible revenu.
Section-keyDescription
outerL'élément d'enrobage le plus externe.
wrapperUn enrobage autour de l'étiquette et de l'entrée.
labelL'étiquette de l'entrée.
prefixN'a pas de sortie par défaut, mais permet du contenu directement avant un élément d'entrée.
prefixIconUn élément pour afficher une icône avant la section de préfixe.
innerUn enrobage autour de l'élément d'entrée réel.
suffixN'a pas de sortie par défaut, mais permet du contenu directement après un élément d'entrée.
suffixIconUn élément pour afficher une icône après la section de suffixe.
inputL'élément d'entrée lui-même.
helpL'élément contenant le texte d'aide.
messagesUn enrobage autour de tous les messages.
messageL'élément (ou plusieurs éléments) contenant un message — le plus souvent des messages de validation et d'erreur.

Accessibilité

Toutes les entrées FormKit sont conçues 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:

Balises sémantiquesAttributs AriaAccessible au clavierIndicateurs de focusContraste des couleurs avec le thème fourniÉtiquettes accessibles, texte d'aide et erreurs
Clé de SectionAttributPar défautDescription
labellabelforAssocie cela à un élément de saisie, améliorant l'accessibilité et l'expérience utilisateur
inputinputdisabledDésactive un élément HTML, empêchant l'interaction de l'utilisateur et signalant un état non interactif
aria-describedbyAméliore l'accessibilité en associant un élément à une description, facilitant la lecture par les lecteurs d'écran
aria-requiredAjoute l'état requis lorsque la validation est requise.
iconiconforChaque 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

Interactions avec le clavier

Événement clavierDescription
TabDéplace le focus vers la prochaine entrée pouvant être ciblée sur la page.
Shift + TabDéplace le focus vers l'entrée précédente pouvant être ciblée sur la page.