RangeSliderPosuvník rozsahu

Posuvník rozsahu umožňuje uživatelům vybrat rozsah hodnot.

Způsob použití

Importujte komponentu podle potřeby:

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

Importujte TypeScript typy komponenty podle potřeby:

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

Příklad použití:

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

Pomocí JavaScript vlastnosti labelFormatter můžete upravit formát zobrazení textového popisku. Tato vlastnost je funkce, jejíž parametr je aktuální hodnota posuvníku rozsahu a návratová hodnota je text, který chcete zobrazit.

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

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

Zdrojový kód

API

Vlastnosti

Atribut	Vlastnost	Typ	Výchozí
	`defaultValue`	`number[]`	`[]`
Výchozí hodnota. Při resetování formuláře se hodnota obnoví na tuto výchozí hodnotu. Tuto vlastnost lze nastavit pouze pomocí JavaScriptu.
	`value`	`number[]`	-
Hodnota posuvníku ve formátu pole, která se odešle spolu s daty formuláře. Poznámka: Tuto vlastnost nelze nastavit pomocí HTML atributu. Pokud chcete tuto hodnotu změnit, lze tak učinit pouze úpravou JavaScriptové vlastnosti.
`autofocus`	`autofocus`	`boolean`	`false`
Určuje, zda prvek získá automaticky fokus po dokončení načítání stránky.
`tabindex`	`tabIndex`	`number`	-
Pořadí prvku při přepínání fokusu pomocí klávesy Tab.
`min`	`min`	`number`	`0`
Minimální hodnota posuvníku. Výchozí hodnota je `0`.
`max`	`max`	`number`	`100`
Maximální hodnota posuvníku. Výchozí hodnota je `100`.
`step`	`step`	`number`	`1`
Krok posuvníku. Výchozí hodnota je `1`.
`tickmarks`	`tickmarks`	`boolean`	`false`
Určuje, zda se mají zobrazit značky stupnice.
`nolabel`	`nolabel`	`boolean`	`false`
Určuje, zda se má skrýt textový popisek.
`disabled`	`disabled`	`boolean`	`false`
Určuje, zda je prvek zakázaný.
`form`	`form`	`string`	-
Přidružený formulář `<form>`. Hodnotou by mělo být `id` prvku `<form>` na stejné stránce. Pokud není atribut zadán, musí být tento prvek potomkem `<form>`. Díky tomuto atributu jej však lze umístit kamkoli na stránku, nejen jako potomka `<form>`.
`name`	`name`	`string`	`''`
Název posuvníku, který se odešle spolu s daty formuláře.
	`validity`	`ValidityState`	-
Objekt s informacemi o stavu validace formuláře; podrobnosti viz `ValidityState`.
	`validationMessage`	`string`	-
Pokud pole formuláře neprojde validací, tato vlastnost obsahuje chybovou zprávu. Při úspěšné validaci je výsledkem prázdný řetězec.
	`labelFormatter`	`(value: number) => string`	-
Funkce pro vlastní formátování zobrazeného popisku. Parametrem funkce je aktuální hodnota posuvníku, návratovou hodnotou je požadovaný text.

Metody

Název	Parametry	Vrací
`click`		`void`
Simuluje kliknutí myší na prvek.
`focus`	`options: FocusOptions` (Volitelné)	`void`
Nastaví fokus na aktuální prvek. Lze předat objekt jako parametr s vlastnostmi: `preventScroll`: Ve výchozím nastavení se po získání fokusu stránka posune tak, aby byl prvek viditelný. Pokud nechcete, aby se stránka posouvala, nastavte tuto vlastnost na `true`.
`blur`		`void`
Odebere fokus z aktuálního prvku.
`checkValidity`		`boolean`
Zkontroluje, zda pole formuláře prošlo validací. Pokud ne, vrátí `false` a spustí událost `invalid`; pokud ano, vrátí `true`.
`reportValidity`		`boolean`
Zkontroluje, zda pole formuláře prošlo validací. Pokud ne, vrátí `false` a spustí událost `invalid`; pokud ano, vrátí `true`. Při neúspěšné validaci se zobrazí chybová zpráva.
`setCustomValidity`	`message: string`	`void`
Nastaví vlastní chybový text. Dokud tento text není prázdný, znamená to, že pole neprošlo validací.

Události

Název
`focus`
Spustí se při získání fokusu.
`blur`
Spustí se při ztrátě fokusu.
`change`
Spustí se, když dojde ke změně hodnoty a prvek ztratí fokus.
`input`
Spustí se při změně hodnoty.
`invalid`
Spustí se, pokud pole formuláře neprojde validací.

CSS Parts

Název
`track-inactive`
Neaktivní část stopy.
`track-active`
Aktivní část stopy.
`handle`
Ovládací prvek.
`label`
Text popisku.
`tickmark`
Značka stupnice.

Předchozí kapitola

Radio Přepínač

Další kapitola

Select Výběr

RangeSliderPosuvník rozsahu

Způsob použití

Příklady

Výchozí hodnota

Zakázaný stav

Rozsah

Krok

Značky stupnice

Skrytí textového popisku

Úprava textového popisku

API

Vlastnosti

Metody

Události

CSS Parts