RangeSlider

Il componente Range Slider consente agli utenti di selezionare un intervallo da una serie di valori.

Utilizzo

Importa il componente:

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

Importa il tipo TypeScript:

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

Esempio:

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

La proprietà value rappresenta il valore corrente del range slider. Puoi impostare il valore del range slider aggiornando la proprietà value. Nota che la proprietà value è un array e può essere accessibile e modificata solo tramite proprietà JavaScript.

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

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

Sorgente

Stato Disabilitato

Il range slider può essere disabilitato aggiungendo l'attributo disabled.

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

Sorgente

Intervallo

Gli attributi min e max consentono di impostare i valori minimo e massimo del range slider.

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

Sorgente

Intervallo di Passaggio

L'attributo step definisce l'intervallo di passaggio del range slider.

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

Sorgente

Segni di Spunta

I segni di spunta possono essere visualizzati sul range slider aggiungendo l'attributo tickmarks.

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

Sorgente

Nascondi Tooltip

Il tooltip sul range slider può essere nascosto aggiungendo l'attributo nolabel.

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

Sorgente

Modifica Tooltip

La proprietà labelFormatter consente di personalizzare il formato di visualizzazione del tooltip. Riceve il valore corrente del range slider e restituisce il testo da visualizzare.

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

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

Sorgente

API

Proprietà

Attributo HTML	Proprietà JavaScript	Tipo	Predefinito
	`defaultValue`	`number[]`	`[]`
Valore predefinito. Quando si reimposta il modulo, verrà ripristinato a questo valore predefinito. Questa proprietà può essere impostata solo tramite JavaScript.
	`value`	`number[]`	-
Valore dello slider, in formato array, verrà inviato insieme ai dati del modulo. NOTA: questa proprietà non può essere impostata come valore iniziale tramite l'attributo HTML. Per modificare questo valore, è possibile farlo solo tramite la proprietà JavaScript.
`autofocus`	`autofocus`	`boolean`	`false`
Se deve ricevere automaticamente il focus al caricamento della pagina
`tabindex`	`tabIndex`	`number`	-
Ordine di tabulazione dell'elemento
`min`	`min`	`number`	`0`
Valore minimo dello slider, il valore predefinito è `0`
`max`	`max`	`number`	`100`
Valore massimo dello slider, il valore predefinito è `100`
`step`	`step`	`number`	`1`
Intervallo di incremento, il valore predefinito è `1`
`tickmarks`	`tickmarks`	`boolean`	`false`
Se aggiungere segni di graduazione
`nolabel`	`nolabel`	`boolean`	`false`
Se nascondere il testo del suggerimento
`disabled`	`disabled`	`boolean`	`false`
Se il componente è disabilitato
`form`	`form`	`string`	-
Elemento `<form>` associato. Il valore di questo attributo deve essere l'`id` di un elemento `<form>` nella stessa pagina. Se questo attributo non è specificato, l'elemento deve essere un elemento figlio dell'elemento `<form>`. Con questo attributo, puoi posizionare l'elemento in qualsiasi punto della pagina, non solo come figlio dell'elemento `<form>`.
`name`	`name`	`string`	`''`
Nome dello slider, verrà inviato insieme ai dati del modulo
	`validity`	`ValidityState`	-
Oggetto dello stato di convalida del modulo, per i dettagli fare riferimento a `ValidityState`
	`validationMessage`	`string`	-
Se la convalida del modulo non viene superata, questo attributo conterrà un messaggio informativo. Se la convalida viene superata, questo attributo sarà una stringa vuota
	`labelFormatter`	`(value: number) => string`	-
Funzione per personalizzare il formato dell'etichetta visualizzata. Il parametro della funzione è il valore corrente dello slider e il valore restituito è il testo da visualizzare.

Metodi

Nome	Parametri	Restituisce
`click`		`void`
Simula un clic del mouse sull'elemento
`focus`	`options: FocusOptions` (Opzionale)	`void`
Imposta il focus sull'elemento corrente. È possibile passare un oggetto come parametro, le cui proprietà includono: `preventScroll`: per impostazione predefinita, dopo che l'elemento riceve il focus, la pagina scorrerà per portare l'elemento in vista. Se non si desidera che la pagina scorra, è possibile impostare questa proprietà su `true`.
`blur`		`void`
Rimuove il focus dall'elemento corrente
`checkValidity`		`boolean`
Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce `false` e attiva l'evento `invalid`; in caso affermativo, restituisce `true`
`reportValidity`		`boolean`
Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce `false` e attiva l'evento `invalid`; in caso affermativo, restituisce `true`. Se la convalida non viene superata, viene visualizzato un messaggio di errore sul componente.
`setCustomValidity`	`message: string`	`void`
Imposta un messaggio di errore personalizzato. Finché questo testo non è vuoto, significa che il campo non ha superato la convalida

Eventi

Nome
`focus`
Attivato quando si riceve il focus
`blur`
Attivato quando si perde il focus
`change`
Questo evento si attiva quando il valore cambia e il componente perde il focus
`input`
Attivato quando il valore cambia
`invalid`
Attivato quando la convalida del campo del modulo non viene superata

CSS Parts

Nome
`track-inactive`
Traccia nello stato non attivo
`track-active`
Traccia nello stato attivo
`handle`
Maniglia di controllo
`label`
Testo del suggerimento
`tickmark`
Segno di graduazione

Capitolo precedente

Radio

Capitolo successivo

Select