SliderPosuvník

Posuvník umožňuje vybrat hodnotu z rozsahu tažením jezdce.

Způsob použití

Importujte komponentu podle potřeby:

import 'mdui/components/slider.js';

Importujte TypeScript typy komponenty podle potřeby:

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

Příklad použití:

<mdui-slider></mdui-slider>

Můžete upravit formát zobrazení textového popisku pomocí JavaScript vlastnosti labelFormatter. Hodnota této vlastnosti by měla být funkce, která přijímá aktuální hodnotu posuvníku jako parametr a vrací text, který chcete zobrazit.

<mdui-slider class="example-label-formatter"></mdui-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í
`value`	`value`	`number`	`0`
Hodnota posuvníku, která se odešle spolu s daty formuláře.
	`defaultValue`	`number`	`0`
Výchozí hodnota. Při resetování formuláře se hodnota obnoví na tuto výchozí hodnotu. Tuto vlastnost lze nastavit pouze pomocí JavaScriptu.
`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

SegmentedButton Segmentované tlačítko

Další kapitola

Snackbar Snackbar

SliderPosuvník

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