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.
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.
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.
Búfer
Usa buffer para dibujar un segundo valor en la barra, detrás del track, como cuánto se ha cargado de un medio. Usa la escala de value y no mueve el control.
Deshabilitado
Activa la propiedad disabled para impedir la interacción con el slider.
Propiedades del componente
| Name | Type | Default | Description |
|---|---|---|---|
value bindable | number | 0 | El valor actual del slider. |
defaultValue | number | min | El valor al que un reinicio del formulario devuelve el slider. Sin él, un input de rango volvería a un valor vacío. |
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. |
buffer | number | Un segundo valor dibujado en la barra detrás del track, como cuánto se ha cargado de un medio. Usa la escala de value y no mueve el control. | |
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. Sin él, un valor entre dos pasos se dibuja tal cual, mientras que el input nativo, y por tanto el formulario, guarda el paso más cercano. | |
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. | |
tooltipPositionConfig | Partial<ComputePositionConfig> | La configuración de posición que se entrega a floating-ui para el tooltip, como en Tooltip. | |
onChange | (value: number) => void | Se llama cada vez que cambia el valor. | |
ref bindable | HTMLInputElement | null | La referencia DOM del input de rango nativo que guarda el valor y recibe el foco del teclado. El resto de atributos del slider se aplican a él. | |
wrapperRef bindable | HTMLDivElement | null | La referencia DOM del elemento que dibuja el slider. | |
wrapperAttributes | HTMLAttributes | Los atributos que se aplican al elemento que dibuja el slider. | |
thumbRef bindable | HTMLElement | null | La referencia del DOM del elemento thumb. | |
tooltipRef bindable | HTMLElement | null | La referencia DOM del elemento tooltip. | |
railRef bindable | HTMLElement | null | La referencia del DOM del elemento del riel. | |
trackRef bindable | HTMLElement | null | La referencia del DOM del elemento de la pista. | |
tickBarRef bindable | HTMLElement | null | La referencia del DOM del elemento barra de marcas. | |
HiddenInputAttributes<HTMLInputAttributes> |