Documentation du Widget Slider

Le widget Slider fournit un contrôle de saisie de plage interactif qui permet aux utilisateurs de sélectionner des valeurs numériques en faisant glisser une poignée le long d'une piste. Ce widget est construit à l'aide du composant slider d'Element UI et offre de nombreuses options de personnalisation.

Aperçu​

Le widget slider permet aux utilisateurs de :

• Sélectionner des valeurs uniques dans une plage définie
• Sélectionner des plages entre deux valeurs (lorsque le mode plage est activé)
• Saisir des valeurs directement via un champ de saisie optionnel
• Appliquer des règles de validation et une visibilité conditionnelle

Configuration de Base​

Paramètres Globaux​

Nom

• Champ: Nom d'affichage du widget
• Objectif: Définit le texte du libellé qui apparaît au-dessus du slider
• Exemple: "Niveau de Volume", "Plage de Prix", "Température"

Variable/Modèle

• Champ: Nom de la variable de liaison de données
• Objectif: Définit la propriété du modèle qui stocke la valeur du slider
• Format: Utilisez la notation camelCase (par exemple, priceRange, volumeLevel)
• Note: Cette valeur sera accessible dans la logique de votre application

Afficher la Saisie

• Type: Bascule booléenne
• Défaut: false
• Objectif: Affiche un champ de saisie à côté du slider pour une saisie directe de valeur
• Cas d'usage: Lorsque les utilisateurs ont besoin d'une saisie de valeur précise

Configuration Avancée​

Règles de Validation​

Configurez la validation pour garantir l'intégrité des données :

Champ Requis

• Rendre le slider obligatoire pour la soumission du formulaire
• Configurer par écran/type d'appareil
• Définir des messages d'erreur personnalisés

Règles de Validation Personnalisées

• Règle de Valeur Minimale: Assurez-vous que la valeur répond aux exigences minimales
• Règle de Valeur Maximale: Empêchez les valeurs de dépasser les limites
• Validation de Plage: Pour les sliders de plage, validez que début < fin
• Logique Personnalisée: Expressions JavaScript pour une validation complexe

Configuration Basée sur l'Écran​

Configurez différents comportements selon les types d'appareils :

Contrôles de Visibilité

• Desktop: Slider complet avec champ de saisie
• Tablet: Slider uniquement, sans champ de saisie
• Mobile: Slider compact avec contrôles tactiles conviviaux

Logique Conditionnelle

• Afficher/masquer en fonction d'autres valeurs de formulaire
• Activation/désactivation dynamique
• Statut de champ requis par écran

Conditions Avancées Utilisez des expressions JavaScript pour une logique complexe :

Style et Mise en Page​

Classes CSS

• Classes Statiques: Ajouter des classes de style prédéfinies
• Classes Dynamiques: Appliquer des classes en fonction de conditions
• Style Personnalisé: Remplacer l'apparence par défaut

Options de Mise en Page

• Largeur: Contrôler la largeur du slider avec des unités CSS
• Alignement: Positionnement dans le conteneur
• Espacement: Ajustements de marge et de padding

Gestion des Événements​

Événements de Changement​

Action On Change Configurez des actions qui se déclenchent lorsque la valeur du slider change :

Actions de Base

• Mettre à jour d'autres champs de formulaire
• Déclencher des calculs
• Appeler des fonctions externes
• Naviguer vers différents écrans

Accès aux Données d'Événement

• SF_input.value: Valeur actuelle du slider
• SF_input.SF_currentIndex: Index de la boucle (lorsque dans des sections répétitives)
• SF_input.SF_data: Contexte complet des données du formulaire

Exemples d'Actions

Bonnes Pratiques​

Expérience Utilisateur​

1. Étiquetage Clair: Utilisez des noms descriptifs et des espaces réservés utiles
2. Plages Appropriées: Définissez des valeurs min/max logiques pour votre cas d'usage
3. Pas Raisonnables: Choisissez des valeurs de pas qui correspondent aux attentes des utilisateurs
4. Retour Visuel: Utilisez des messages de validation et des repères visuels
5. Convivial pour Mobile: Testez les interactions tactiles sur les appareils mobiles

Performance​

1. Actions avec Debounce: Évitez de déclencher des actions à chaque petit changement
2. Validation Efficace: Gardez les règles de validation simples et rapides
3. Rendus Minimaux: Structurez efficacement les gestionnaires de changement

Accessibilité​

1. Navigation au Clavier: Assurez-vous que le slider fonctionne avec les contrôles du clavier
2. Lecteurs d'Écran: Fournissez des libellés et descriptions significatifs
3. Contraste de Couleur: Assurez-vous que le slider est visible pour tous les utilisateurs
4. Indicateurs de Focus: États de focus visuels clairs

Cas d'Usage Courants​

Sliders à Valeur Unique​

• Contrôles de Volume: Ajustement du volume audio/vidéo
• Indicateurs de Progression: Pourcentage de complétion
• Systèmes d'Évaluation: Scores de satisfaction (1-10)
• Sélecteurs de Quantité: Quantités de produits
• Saisies de Pourcentage: Taux de remise, taux de complétion

Sliders de Plage​

• Filtres de Prix: Plages de prix e-commerce
• Plages de Dates: Sélections de chronologie
• Filtres de Taille: Plages de dimensions
• Métriques de Performance: Seuils min/max
• Allocation de Ressources: Distributions de budget

Tableaux de Bord Interactifs​

• Contrôles de Filtre: Ajuster les plages de visualisation de données
• Réglage de Paramètres: Ajustements d'algorithmes en temps réel
• Contrôles de Simulation: Ajuster les paramètres de simulation
• Paramètres de Seuil: Seuils d'alerte et de notification

Dépannage​

Problèmes Courants​

Le Slider ne Répond Pas

• Vérifiez si le widget est désactivé via les règles de validation
• Vérifiez que les valeurs min/max sont correctement définies
• Assurez-vous que la valeur de pas n'est pas zéro ou négative

Erreurs de Validation

• Vérifiez la syntaxe des règles de validation
• Vérifiez les types de données (nombre vs chaîne)
• Vérifiez la configuration du champ requis

Problèmes de Style

• Inspectez les conflits de classes CSS
• Vérifiez les paramètres de largeur et les contraintes du conteneur
• Vérifiez le comportement responsive sur les appareils

Problèmes de Performance

• Optimisez les gestionnaires d'événements de changement
• Vérifiez la logique de validation complexe
• Vérifiez les fuites de mémoire dans les actions personnalisées

Conseils de Débogage​

1. Journalisation Console: Ajoutez console.log aux gestionnaires de changement
2. Inspection du Modèle: Vérifiez les valeurs du modèle de formulaire dans les outils de développement du navigateur
3. Surveillance Réseau: Surveillez les appels API excessifs lors des changements de valeur
4. Tests de Validation: Testez les cas limites et les valeurs limites

Ce widget slider fournit un composant d'interface puissant et flexible qui peut s'adapter à divers cas d'usage tout en maintenant une excellente expérience utilisateur et performance.