Slider

Un slider permite seleccionar un valor dentro de un rango continuo o discreto arrastrando un control a lo largo de una barra. Admite orientación horizontal y vertical, marcas de escala, un tooltip con el valor y dirección invertida.

Uso

<script>
	import { Slider } from 'fluentui-svelte';
</script>

<Slider value={50} min={0} max={100} />

Rango y paso

Usa las propiedades min, max y step para controlar el rango de valores y el incremento entre ellos.

Ver Código

<Slider value={20} min={0} max={50} step={5} />

Marcas de escala

Pasa un arreglo de valores a la propiedad ticks para mostrar marcas a lo largo de la barra. Usa tickPlacement para colocarlas around, before o after respecto al riel.

Ver Código

<Slider value={50} step={25} ticks={[0, 25, 50, 75, 100]} />

Orientación vertical

Establece orientation en vertical para disponer el slider verticalmente. Asegúrate de que el contenedor tenga una altura definida para que el slider sea visible.

Ver Código

<Slider value={40} orientation="vertical" />

Deshabilitado

Activa la propiedad disabled para impedir la interacción con el slider.

Ver Código

<Slider value={30} disabled />

Propiedades del componente

Name	Type	Default	Description
`value` bindable	`number`	`0`	El valor actual del slider.
`min`	`number`	`0`	El valor mínimo del slider.
`max`	`number`	`100`	El valor máximo del slider.
`step`	`number`	`1`	Cuánto se mueve el valor en cada paso.
`ticks`	`number[]`	`[]`	Los valores en los que se dibujan las marcas.
`tickPlacement`	`'around'` \| `'before'` \| `'after'`	`'around'`	Dónde se sitúan las marcas respecto al rail.
`prefix`	`string`	`''`	Texto que se antepone al valor en el tooltip.
`suffix`	`string`	`''`	Texto que se añade después del valor en el tooltip.
`track`	`boolean`	`true`	Si se rellena el rail hasta el valor actual.
`orientation`	`'horizontal'` \| `'vertical'`	`'horizontal'`	La dirección en la que corre el slider.
`reverse`	`boolean`	`false`	Hace que el slider vaya del máximo al mínimo en su lugar.
`disabled`	`boolean`	`false`	Deshabilita la interacción del usuario.
`sync`	`boolean`		Lleva el thumb al puntero en cuanto se pulsa, en lugar de avanzar por pasos hacia él.
`tooltip`	`boolean`	`true`	Si se muestra el valor en un tooltip mientras se arrastra.
`tooltipPlacement`	`Placement`	`'top'`	Dónde se coloca el tooltip respecto al thumb.
`tooltipContent`	`string` \| `Snippet` \| `Component`		Contenido personalizado para el tooltip, que sustituye al valor simple.
`onChange`	`(value: number) => void`		Se llama cada vez que cambia el valor.
`class`	`string`		La clase que se aplica al slider.
`ref` bindable	`HTMLElement`		La referencia del DOM del elemento slider.
`inputRef` bindable	`HTMLInputElement`		La referencia DOM del input subyacente.
`thumbRef` bindable	`HTMLElement`		La referencia del DOM del elemento thumb.
`tooltipRef` bindable	`HTMLElement`		La referencia DOM del elemento tooltip.
`railRef` bindable	`HTMLElement`		La referencia del DOM del elemento del riel.
`trackRef` bindable	`HTMLElement`		La referencia del DOM del elemento de la pista.
`tickBarRef` bindable	`HTMLElement`		La referencia del DOM del elemento barra de marcas.
Element Attributes (`div`)