SliderCsúszka

El componente Slider permite a los usuarios seleccionar un valor de una serie deslizando el control deslizante.

Uso

Importa el componente cuando lo necesites:

import 'mdui/components/slider.js';

Importa el tipo TypeScript cuando lo necesites:

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

Uso:

<mdui-slider></mdui-slider>

Puedes modificar el formato de visualización de la Tooltip mediante la propiedad JavaScript labelFormatter. Esta propiedad es una función que recibe el valor actual del Slider y devuelve el texto que deseas mostrar.

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

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

Forrás

API

Tulajdonságok

Attribútum	Tulajdonság	Típus	Alapértelmezett
`value`	`value`	`number`	`0`
Valor del Slider, que se enviará con los datos del formulario.
	`defaultValue`	`number`	`0`
Valor por defecto. Al restablecer el formulario, se restaurará a este valor. Esta propiedad solo se puede establecer mediante una propiedad de JavaScript.
`autofocus`	`autofocus`	`boolean`	`false`
Indica si el componente debe recibir el foco automáticamente cuando la página termine de cargar.
`tabindex`	`tabIndex`	`number`	-
Orden del elemento al navegar con la tecla Tab.
`min`	`min`	`number`	`0`
Valor mínimo del slider, por defecto `0`.
`max`	`max`	`number`	`100`
Valor máximo del slider, por defecto `100`.
`step`	`step`	`number`	`1`
Intervalo de paso, por defecto `1`.
`tickmarks`	`tickmarks`	`boolean`	`false`
Indica si se deben mostrar marcas de graduación.
`nolabel`	`nolabel`	`boolean`	`false`
Indica si se oculta la etiqueta de texto.
`disabled`	`disabled`	`boolean`	`false`
Indica si está deshabilitado.
`form`	`form`	`string`	-
Elemento `<form>` asociado. El valor de esta propiedad debe ser el `id` de un elemento `<form>` en la misma página. Si no se especifica esta propiedad, el elemento debe ser hijo de un elemento `<form>`. Con esta propiedad, puedes colocar el elemento en cualquier lugar de la página, no solo como hijo de un elemento `<form>`.
`name`	`name`	`string`	`''`
Nombre del slider, que se enviará con los datos del formulario.
	`validity`	`ValidityState`	-
Objeto de estado de validación del formulario, véase `ValidityState`.
	`validationMessage`	`string`	-
Si falla la validación del formulario, esta propiedad contendrá un mensaje informativo. Si la validación es correcta, esta propiedad será una cadena vacía.
	`labelFormatter`	`(value: number) => string`	-
Función para personalizar el formato de la etiqueta. La función recibe el valor actual del slider y debe devolver el texto a mostrar.

Metódusok

Név	Paraméterek	Visszatérési érték
`click`		`void`
Simula un clic del ratón en el elemento.
`focus`	`options: FocusOptions` (Opcionális)	`void`
Establece el foco en el elemento actual. Puede pasarse un objeto como parámetro con las siguientes propiedades: `preventScroll`: Por defecto, cuando el elemento recibe el foco, la página se desplaza hasta mostrarlo. Si no quiere que la página se desplace, defina esta propiedad como `true`.
`blur`		`void`
Quita el foco del elemento actual.
`checkValidity`		`boolean`
Comprueba si el campo del formulario pasa la validación. Si falla, devuelve `false` y dispara el evento `invalid`; si la pasa, devuelve `true`.
`reportValidity`		`boolean`
Comprueba si el campo del formulario pasa la validación. Si falla, devuelve `false` y dispara el evento `invalid`; si la pasa, devuelve `true`. Si la validación falla, también muestra un mensaje de error en el componente.
`setCustomValidity`	`message: string`	`void`
Establece un mensaje de error personalizado. Si este mensaje no está vacío, indica que el campo no ha pasado la validación.

Események

Név
`focus`
Se dispara cuando recibe el foco.
`blur`
Se dispara cuando pierde el foco.
`change`
Se dispara cuando el valor cambia y se pierde el foco.
`input`
Se dispara cuando el valor cambia.
`invalid`
Se dispara cuando falla la validación del campo del formulario.

CSS Parts

Név
`track-inactive`
Pista inactiva.
`track-active`
Pista activa.
`handle`
Mango.
`label`
Texto de la etiqueta.
`tickmark`
Marca de graduación.

Előző fejezet

SegmentedButton Szegmentált gomb

Következő fejezet

Snackbar Snackbar

SliderCsúszka

Uso

Ejemplos

Valor predeterminado

Estado deshabilitado

Rango

Intervalo de paso

Marcas de graduación

Ocultar la Tooltip

Personalizar la Tooltip

API

Tulajdonságok

Metódusok

Események

CSS Parts