RangeSlider

Le composant Range Slider permet aux utilisateurs de sélectionner une plage de valeurs.

Utilisation

Importez le composant :

import 'mdui/components/range-slider.js';

Importez le type TypeScript correspondant :

import type { RangeSlider } from 'mdui/components/range-slider.js';

Exemple d'utilisation :

<mdui-range-slider></mdui-range-slider>

Exemples

Valeur par défaut

L'attribut value (un tableau) permet de lire ou de définir la valeur actuelle. Il ne peut être modifié que via la propriété JavaScript.

<mdui-range-slider class="example-value"></mdui-range-slider>

<script>
  const slider = document.querySelector(".example-value");
  slider.value = [30, 70];
</script>

Source

État désactivé

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

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

Source

Plage

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

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

Source

Pas

Utilisez l'attribut step pour définir l'intervalle.

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

Source

Repères

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

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

Source

Masquer l'infobulle

Ajoutez l'attribut nolabel pour masquer l'infobulle.

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

Source

Formater l'infobulle

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

<mdui-range-slider class="example-label-formatter"></mdui-range-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
	`defaultValue`	`number[]`	`[]`
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.
	`value`	`number[]`	-
Valeur du Range Slider, au format tableau, qui sera envoyée avec les données du formulaire. REMARQUE : Cette propriété ne peut pas être définie comme valeur initiale via un attribut HTML. Pour modifier cette valeur, vous ne pouvez le faire qu'en modifiant la valeur de la 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

Radio

Chapitre suivant

Select