Slider

Le composant Slider permet aux utilisateurs de sélectionner une valeur en déplaçant un curseur le long d'une piste.

Utilisation

Importez le composant selon vos besoins :

import 'mdui/components/slider.js';

Importez le type TypeScript correspondant :

import type { Slider } from 'mdui/components/slider.js';

Exemple d'utilisation :

<mdui-slider></mdui-slider>

Exemples

Valeur par défaut

L'attribut value permet de lire ou définir la valeur actuelle.

<mdui-slider value="50"></mdui-slider>

Source

État désactivé

Ajoutez l'attribut disabled pour désactiver le Slider.

<mdui-slider disabled></mdui-slider>

Source

Plage de valeurs

Utilisez les attributs min et max pour définir la plage de valeurs.

<mdui-slider min="10" max="20"></mdui-slider>

Source

Pas

Utilisez l'attribut step pour définir l'incrément.

<mdui-slider step="10"></mdui-slider>

Source

Repères

Ajoutez l'attribut tickmarks pour afficher des repères.

<mdui-slider tickmarks step="10"></mdui-slider>

Source

Masquer l'infobulle

Ajoutez l'attribut nolabel pour masquer l'infobulle.

<mdui-slider nolabel></mdui-slider>

Source

Formater l'infobulle

Utilisez la propriété JavaScript labelFormatter (qui est une fonction) pour formater l'infobulle.

<mdui-slider class="example-label-formatter"></mdui-slider>

<script>
  const slider = document.querySelector(".example-label-formatter");
  slider.labelFormatter = (value) => `${value} heures`;
</script>

Source

API

Propriétés

Attribut HTML	Propriété JavaScript	Type	Défaut
`value`	`value`	`number`	`0`
Valeur du Slider, qui sera envoyée avec les données du formulaire
	`defaultValue`	`number`	`0`
Valeur par défaut. Lors de la réinitialisation du formulaire, il reviendra à cette valeur par défaut. Cette propriété ne peut être définie que par une propriété JavaScript.
`autofocus`	`autofocus`	`boolean`	`false`
Si le focus doit être automatiquement obtenu après le chargement de la page
`tabindex`	`tabIndex`	`number`	-
Ordre de l'élément lors de la navigation au clavier avec la touche Tab
`min`	`min`	`number`	`0`
Valeur minimale du Slider, par défaut `0`.
`max`	`max`	`number`	`100`
Valeur maximale du Slider, par défaut `100`.
`step`	`step`	`number`	`1`
Intervalle d'incrémentation, par défaut `1`.
`tickmarks`	`tickmarks`	`boolean`	`false`
Si des repères doivent être ajoutés
`nolabel`	`nolabel`	`boolean`	`false`
Si l'infobulle doit être masquée
`disabled`	`disabled`	`boolean`	`false`
Si le composant est désactivé
`form`	`form`	`string`	-
Élément `<form>` associé. La valeur de cet attribut doit être l'`id` d'un élément `<form>` dans la même page. Si cet attribut n'est pas spécifié, l'élément doit être un enfant de l'élément `<form>`. Grâce à cet attribut, vous pouvez placer l'élément n'importe où sur la page, pas seulement en tant qu'enfant de l'élément `<form>`.
`name`	`name`	`string`	`''`
Nom du Slider, qui sera envoyé avec les données du formulaire
	`validity`	`ValidityState`	-
État de validation du formulaire, voir `ValidityState` pour plus de détails
	`validationMessage`	`string`	-
Si la validation du formulaire échoue, cet attribut contient un message d'erreur. Si la validation réussit, cet attribut est une chaîne vide
	`labelFormatter`	`(value: number) => string`	-
Fonction pour personnaliser le format d'affichage de l'étiquette. Le paramètre de la fonction est la valeur actuelle du Slider, et la valeur de retour est le texte à afficher.

Méthodes

Nom	Paramètres	Valeur de retour
`click`		`void`
Simule un clic sur l'élément
`focus`	`options: FocusOptions` (Optionnel)	`void`
Place le focus sur l'élément. Vous pouvez passer un objet en paramètre, dont les propriétés incluent : `preventScroll` : Par défaut, après la prise de focus, la page défile pour amener l'élément à l'écran. Si vous ne souhaitez pas que la page défile, vous pouvez définir cette propriété sur `true`.
`blur`		`void`
Retire le focus de l'élément
`checkValidity`		`boolean`
Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie `false` et déclenche l'événement `invalid` ; sinon, renvoie `true`.
`reportValidity`		`boolean`
Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie `false` et déclenche l'événement `invalid` ; sinon, renvoie `true`. Si la validation échoue, un message d'erreur s'affiche également sur le composant.
`setCustomValidity`	`message: string`	`void`
Définit un texte d'erreur personnalisé. Tant que ce texte n'est pas vide, cela signifie que le champ n'est pas valide.

Événements

Nom
`focus`
Se déclenche lorsque l'élément obtient le focus
`blur`
Se déclenche lorsque l'élément perd le focus
`change`
Se déclenche lorsque la valeur change et que l'élément perd le focus
`input`
Se déclenche lorsque la valeur change
`invalid`
Se déclenche lorsque la validation du champ du formulaire échoue

CSS Parts

Nom
`track-inactive`
Piste à l'état inactif
`track-active`
Piste à l'état actif
`handle`
Poignée
`label`
Texte de l'infobulle
`tickmark`
Repère

Chapitre précédent

SegmentedButton

Chapitre suivant

Snackbar