Curseur

Aperçu

Le composant Avonni Slider permet aux utilisateurs de sélectionner une valeur numérique unique ou une plage en faisant glisser des poignées le long d'une piste. Il est parfait pour les scénarios où une échelle visuelle est plus intuitive que la saisie de nombres, offrant une méthode d'entrée tactile et engageante.

Principales caractéristiques

• Mode unique ou plage : Sélectionnez une valeur ou définissez une plage de début/fin.

• Échelle visuelle : Affiche le min, le max et les incréments pour une orientation claire.

• Personnalisation : Ajustez l'orientation, la taille, les graduations, les pins et les unités.

• Interactivité : Faites glisser les poignées pour un contrôle précis.

Cas d'utilisation

• Sélectionnez un prix ou une plage de budget.

• Choisissez des pourcentages (par ex., remises ou niveaux d'avancement).

• Définissez des quantités ou des préférences numériques.

• Saisissez des évaluations sur des échelles personnalisées.

• Filtrez les données par plages numériques (par ex., en mode plage).

Configuration

Sélectionnez le composant Slider sur le canevas pour voir ses propriétés dans le panneau de propriétés à droite.

Propriétés de base

Ces identifient et étiquettent les poignées.

Propriété	Type	Description	Exemple
par le véritable	Texte	Identifiant unique pour l'instance du composant.	PriceSlider
Étiquette	Texte	Étiquette principale affichée aux utilisateurs.	"Sélectionner le prix :"
Aide au niveau du champ	Texte (optionnel)	Contexte ou instructions supplémentaires.	"Faites glisser pour définir le budget."

Fonctionnalité principale et liaison de données

Ceci définit le mode de sélection et la capture des données.

Propriété	Type/Condition	Description
Valeurs multiples	Booléen (Case à cocher)	Désactivé : sélection d'une valeur unique (par défaut). Activé : sélection d'une plage avec deux poignées.
propriété	Liaison de variable	Mode unique : liez à une variable Nombre. Mode plage : liez à une collection de nombres (index 0 = min, 1 = max). Astuce : Préremplir pour les valeurs par défaut.
à "Fourchette de prix :".	Nombre	Valeur minimale sur la piste.
Min	Nombre	Valeur maximale sur la piste.
Max	Nombre	Incrément entre valeurs sélectionnables (par ex., 1 pour des entiers, 0,5 pour des demi-unités).
Type	Sélectionnez	Orientation : horizontale (par défaut) ou verticale.

Bonne pratique : Assurez-vous que Min < Max et que Step correspond à l'échelle pour éviter des problèmes d'ergonomie.

Apparence et affichage

Celles-ci contrôlent le style visuel.

Propriété	Type/Condition	Description	Options/Exemples
Variante	Sélectionnez	Style et position de l'étiquette.	standard (au-dessus), étiquette masquée.
Taille	Sélectionnez	Taille globale du composant.	très petite, petite, moyenne (par défaut), grande, responsive.
Si vos données représentent des unités spécifiques (monnaie, pourcentages, etc.), envisagez d'indiquer visuellement ces unités dans l'étiquette du composant ou d'utiliser l'	Sélection/Texte	Ajoute des unités aux valeurs (par ex., devise, pourcentage, ou personnalisé comme "kg").	pourcentage, devise, "heures".
Masquer les valeurs Min/Max	Booléen (Case à cocher)	Masque les étiquettes min/max aux extrémités de la piste.	-
Masquer la piste	Booléen (Case à cocher)	Rend la piste invisible (poignées uniquement).	-
Pas	Booléen (Case à cocher)	Affiche une info-bulle avec la valeur actuelle pendant le glissement.	Recommandé pour la précision.
Afficher les marques de graduation	Booléen (Case à cocher)	Ajoute des graduations le long de la piste en fonction de Step.	-
Style des marques de graduation	Sélectionner (si les graduations sont activées)	Apparence des graduations.	inner-tick, tick, dot.

Astuce

Activez l'affichage du pin pour un meilleur retour, surtout sur mobile.

Propriétés de comportement

Ceci gère l'interactivité et l'état.

Propriété	Type	Description
Désactivé	Booléen	Désactive toutes les interactions.
Lecture seule	Booléen	Empêche les modifications mais reste visible.
Désactiver l'échange	Booléen (mode plage uniquement)	Empêche la poignée min de dépasser la poignée max (maintient l'ordre).
Requis	Booléen	Exige une sélection ; à utiliser avec la validation de formulaire.
Visible	Booléen	Bascule l'affichage ; liez à une variable booléenne pour la dynamique.

: La valeur maximale.

Curseur à valeur unique : sélection d'un pourcentage de remise

1

Ajouter le composant Slider

• par le véritable: discountSlider (utilisé pour référencer l'attribut Value plus tard)

• Étiquette: "Pourcentage de remise :"

• Valeurs multiples: Désactivé

• à "Fourchette de prix :".: 0

• Min: 100

• Max: 5

• Si vos données représentent des unités spécifiques (monnaie, pourcentages, etc.), envisagez d'indiquer visuellement ces unités dans l'étiquette du composant ou d'utiliser l': pourcentage

• Pas: Activé

2

Utiliser la valeur

Dans une ressource Formule (ou ailleurs, comme dans les interactions), calculez le prix après remise en utilisant $Component.discountSlider.Value (cela accède directement à la valeur sélectionnée du slider).

Les utilisateurs font glisser la poignée pour sélectionner un pourcentage, la valeur étant immédiatement accessible via l'attribut du composant pour des calculs ou des mises à jour.

---

Considérations clés

• Principes de liaison : Faites correspondre la liaison Value au mode (Nombre pour unique, Collection pour plage) pour capturer correctement les sélections.

• Logique d'échelle : Testez Min, Max et Step pour des incréments intuitifs ; de petits Steps sur de larges plages peuvent donner une sensation de lenteur.

• Nuances du mode plage : Utilisez Disable Swap pour imposer min ≤ max.

• Formatage des unités : Configurez les décimales ou les paramètres régionaux dans les réglages associés pour un affichage soigné.

• Accessibilité : Activez les pins et les graduations ; assurez-vous que la navigation au clavier fonctionne pour tous les utilisateurs.

---

Dépannage des problèmes courants

• Chevauchement des poignées : En mode plage, basculez Disable Swap si des inversions se produisent involontairement.

• Lenteurs de performance : Pour de petits Step (par ex., 0,01), limitez la plage Max-Min pour réduire la charge de rendu.

• Affichage des erreurs : Si les unités ne s'affichent pas, vérifiez les paramètres de l'organisation pour les formats de devise/pourcentage.

---

Résumé

Le composant Avonni Slider offre un moyen engageant de gérer des entrées numériques ou des plages dans les interfaces Salesforce. Avec une liaison et une personnalisation robustes, il est polyvalent pour les formulaires, les filtres et plus encore. Pour les intégrations, consultez Avonni Data Table ou le guide des variables.