SliderCsúszka

A csúszka komponens lehetővé teszi, hogy a felhasználók a csúszka mozgatásával válasszanak ki egy értéket egy értéksorozatból.

Használat

A komponens importálása:

import 'mdui/components/slider.js';

A komponens TypeScript-típusának importálása:

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

Példa:

<mdui-slider></mdui-slider>

A labelFormatter JavaScript-tulajdonsággal módosíthatja a szöveges tipp megjelenítési formátumát. Ennek a tulajdonságnak az értéke egy függvény, amely a csúszka aktuális értékét veszi paraméterül, és visszatérési értéke a megjeleníteni kívánt szöveg.

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

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

Forrás

API

Tulajdonságok

Attribútum	Tulajdonság	Típus	Alapértelmezett
`value`	`value`	`number`	`0`
A csúszka értéke, amely az űrlapadatokkal együtt kerül elküldésre.
	`defaultValue`	`number`	`0`
Alapértelmezett érték. Az űrlap visszaállításakor erre az alapértékre áll vissza. Ez a tulajdonság csak JavaScript tulajdonságként állítható be.
`autofocus`	`autofocus`	`boolean`	`false`
Automatikusan fókuszt kapjon-e betöltődés után.
`tabindex`	`tabIndex`	`number`	-
Az elem sorszáma a Tab billentyűvel történő navigálás során.
`min`	`min`	`number`	`0`
A csúszka minimális értéke, alapértelmezés szerint `0`.
`max`	`max`	`number`	`100`
A csúszka maximális értéke, alapértelmezés szerint `100`.
`step`	`step`	`number`	`1`
A lépésköz, alapértelmezés szerint `1`.
`tickmarks`	`tickmarks`	`boolean`	`false`
Osztásjelek hozzáadása.
`nolabel`	`nolabel`	`boolean`	`false`
A szöveges súgó elrejtése.
`disabled`	`disabled`	`boolean`	`false`
Letiltott állapotú-e.
`form`	`form`	`string`	-
A kapcsolódó `<form>` elem. Ennek az attribútumnak az értéke egy `<form>` elem `id`-ja kell legyen ugyanazon az oldalon. Ha ez az attribútum nincs megadva, az elemnek a `<form>` elem gyermekének kell lennie. Ezzel az attribútummal az elem az oldal bármely pontjára elhelyezhető, nem csak a `<form>` elem gyermekeként.
`name`	`name`	`string`	`''`
A csúszka neve, amely az űrlapadatokkal együtt kerül elküldésre.
	`validity`	`ValidityState`	-
Az űrlap-ellenőrzés állapotobjektuma, részletekért lásd: `ValidityState`
	`validationMessage`	`string`	-
Ha az űrlap-ellenőrzés sikertelen, ez a tulajdonság tartalmazza a hibaüzenetet. Ha sikeres, üres karakterlánc.
	`labelFormatter`	`(value: number) => string`	-
A címke megjelenítési formátumának testreszabására szolgáló függvény. A függvény paramétere a csúszka aktuális értéke, visszatérési értéke pedig a megjeleníteni kívánt szöveg.

Metódusok

Név	Paraméterek	Visszatérési érték
`click`		`void`
Egérkattintás szimulálása az elemen.
`focus`	`options: FocusOptions` (Opcionális)	`void`
Fókusz állítása az aktuális elemre. Egy objektum is átadható paraméterként, a következő tulajdonságokkal: `preventScroll`: Alapértelmezés szerint a fókusz elnyerése után a böngésző az elemre görget. Ha ezt a tulajdonságot `true`-ra állítja, a görgetés elmarad.
`blur`		`void`
Fókusz eltávolítása az aktuális elemről.
`checkValidity`		`boolean`
Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, `false` értéket ad vissza és kiváltja az `invalid` eseményt; ha igen, `true` értéket ad vissza.
`reportValidity`		`boolean`
Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, `false` értéket ad vissza, kiváltja az `invalid` eseményt, és megjeleníti a hibajelzést a komponensen; ha igen, `true` értéket ad vissza. Ha az ellenőrzés sikertelen, a komponensen megjelenik az érvénytelenséget jelző vizuális visszajelzés.
`setCustomValidity`	`message: string`	`void`
Egyéni hibaüzenet beállítása. Amíg ez a szöveg nem üres, addig a mező érvénytelennek minősül.

Események

Név
`focus`
Fókusz elnyerésekor aktiválódik.
`blur`
Fókusz elvesztésekor aktiválódik.
`change`
Az érték megváltozik és elveszti a fókuszt, ekkor aktiválódik ez az esemény.
`input`
Az érték változásakor aktiválódik.
`invalid`
Az űrlapmező ellenőrzésének sikertelenségekor aktiválódik.

CSS Parts

Név
`track-inactive`
A nem aktív állapot sávja.
`track-active`
Az aktív állapot sávja.
`handle`
Fogantyú.
`label`
Tipp szöveg.
`tickmark`
Osztásjel.

Előző fejezet

SegmentedButton Szegmentált gomb

Következő fejezet

Snackbar Snackbar

SliderCsúszka

Használat

Példák

Alapértelmezett érték

Letiltott állapot

Tartomány

Lépésköz

Skálajelölések

Szöveges tipp elrejtése

Szöveges tipp módosítása

API

Tulajdonságok

Metódusok

Események

CSS Parts