RangeSliderSuwak zakresu

Komponent suwaka zakresu umożliwia wybranie zakresu wartości.

Sposób użycia

Zaimportuj komponent:

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

Zaimportuj typ TypeScript komponentu:

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

Przykład użycia:

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

Właściwość JavaScript labelFormatter możesz zmienić format wyświetlanej etykiety tekstowej. Wartość tej właściwości to funkcja, której parametrem jest bieżąca wartość suwaka zakresu, a która zwraca tekst, który chcesz wyświetlić.

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

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

Źródło

API

Właściwości

Atrybut HTML	Właściwość JavaScript	Typ	Domyślne
	`defaultValue`	`number[]`	`[]`
Wartość domyślna. Po zresetowaniu formularza zostanie przywrócona do tej wartości. Ten atrybut można ustawić tylko za pomocą właściwości JavaScript
	`value`	`number[]`	-
Wartość suwaka w formacie tablicy, która zostanie wysłana wraz z danymi formularza. UWAGA: Tej właściwości nie można ustawić za pomocą atrybutu HTML. Aby zmienić tę wartość, można to zrobić tylko poprzez modyfikację wartości właściwości JavaScript.
`autofocus`	`autofocus`	`boolean`	`false`
Określa, czy element automatycznie uzyskuje fokus po załadowaniu strony.
`tabindex`	`tabIndex`	`number`	-
Określa kolejność elementu podczas nawigacji za pomocą klawiatury (przycisk Tab).
`min`	`min`	`number`	`0`
Minimalna wartość suwaka, domyślnie `0`
`max`	`max`	`number`	`100`
Maksymalna wartość suwaka, domyślnie `100`
`step`	`step`	`number`	`1`
Skok wartości, domyślnie `1`
`tickmarks`	`tickmarks`	`boolean`	`false`
Określa, czy dodać znaczniki podziałki
`nolabel`	`nolabel`	`boolean`	`false`
Określa, czy ukryć podpowiedź tekstową
`disabled`	`disabled`	`boolean`	`false`
Określa, czy komponent jest wyłączony.
`form`	`form`	`string`	-
Powiązany element `<form>`. Wartość tego atrybutu powinna być `id` elementu `<form>` na tej samej stronie. Jeśli ten atrybut nie jest określony, element ten musi być elementem potomnym elementu `<form>`. Ten atrybut umożliwia umieszczenie elementu w dowolnym miejscu na stronie, nie tylko jako element potomny elementu `<form>`.
`name`	`name`	`string`	`''`
Nazwa suwaka, która zostanie wysłana wraz z danymi formularza
	`validity`	`ValidityState`	-
Obiekt stanu walidacji formularza, zobacz `ValidityState`
	`validationMessage`	`string`	-
Jeśli walidacja formularza nie powiedzie się, ten atrybut zawiera komunikat informacyjny. Jeśli walidacja się powiedzie, ten atrybut jest pustym ciągiem znaków
	`labelFormatter`	`(value: number) => string`	-
Funkcja formatująca etykietę. Przyjmuje bieżącą wartość suwaka, a zwraca tekst do wyświetlenia.

Metody

Nazwa	Parametry	Zwraca
`click`		`void`
Symuluje kliknięcie myszą na elemencie
`focus`	`options: FocusOptions` (Opcjonalny)	`void`
Przenosi fokus na bieżący element. Można przekazać obiekt jako parametr, którego właściwości obejmują: `preventScroll`: Domyślnie, po otrzymaniu fokusu przez element, strona przewinie się, aby go wyświetlić. Aby zapobiec przewijaniu strony, ustaw tę właściwość na `true`.
`blur`		`void`
Usuwa fokus z bieżącego elementu
`checkValidity`		`boolean`
Sprawdza poprawność pola formularza. Jeśli nie, zwraca `false` i wywołuje zdarzenie `invalid`; jeśli tak, zwraca `true`
`reportValidity`		`boolean`
Sprawdza poprawność pola formularza. Jeśli nie, zwraca `false` i wywołuje zdarzenie `invalid`; jeśli tak, zwraca `true`. Jeśli walidacja się nie powiedzie, na komponencie wyświetlany jest również komunikat o niepowodzeniu walidacji.
`setCustomValidity`	`message: string`	`void`
Ustawia niestandardowy komunikat o błędzie. Dopóki ten tekst nie jest pusty, oznacza to, że pole nie przeszło walidacji

Zdarzenia

Nazwa
`focus`
Wywoływane po otrzymaniu fokusu
`blur`
Wywoływane po utracie fokusu
`change`
Wywoływane, gdy wartość ulegnie zmianie i element straci fokus
`input`
Wywoływane przy każdej zmianie wartości
`invalid`
Wywoływane, gdy pole formularza nie przejdzie walidacji

CSS Parts

Nazwa
`track-inactive`
Tor w stanie nieaktywnym
`track-active`
Tor w stanie aktywnym
`handle`
Uchwyt
`label`
Tekst podpowiedzi
`tickmark`
Znacznik podziałki

Poprzedni rozdział

Radio Przycisk radiowy

Następny rozdział

Select Lista wyboru

RangeSliderSuwak zakresu

Sposób użycia

Przykłady

Wartość domyślna

Stan wyłączony

Zakres

Krok

Znaczniki

Ukrywanie etykiety tekstowej

Modyfikacja etykiety tekstowej

API

Właściwości

Metody

Zdarzenia

CSS Parts