RangeSliderRange Slider

El componente Range Slider permite seleccionar un rango de valores dentro de una serie.

Uso

Importa el componente cuando lo necesites:

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

Importa el tipo TypeScript cuando lo necesites:

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

Uso:

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

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

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

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

Fuente

API

Propiedades

Atributo	Propiedad	Tipo	Predeterminado
	`defaultValue`	`number[]`	`[]`
Valor por defecto. Al restablecer el formulario, se restaurará a este valor. Esta propiedad solo se puede establecer mediante una propiedad de JavaScript.
	`value`	`number[]`	-
Valor del Range Slider, en formato de array, que se enviará con los datos del formulario. NOTA: Esta propiedad no se puede establecer mediante un atributo HTML. Si se desea modificar este valor, solo se puede modificar la 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.

Métodos

Nombre	Parámetros	Valor de retorno
`click`		`void`
Simula un clic del ratón en el elemento.
`focus`	`options: FocusOptions` (Opcional)	`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.

Eventos

Nombre
`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

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

Capítulo anterior

Radio Radio

Capítulo siguiente

Select Select

RangeSliderRange Slider

Uso

Ejemplos

Valor predeterminado

Estado deshabilitado

Rango

Intervalo de paso

Marcas de graduación

Ocultar la Tooltip

Personalizar la Tooltip

API

Propiedades

Métodos

Eventos

CSS Parts