componente · @solu30/ui-kit/input

Slider

Deslizador de un valor o de un rango con dos manijas, con etiquetas de mínimo y máximo.

Seguir leyendo — 2 párrafos más

Range slider with single and dual-thumb modes.

Uses CSS variables for theming:

--ui-accent for active track and thumb
--ui-bg-raised for thumb border
--ui-border for inactive track
--ui-content-secondary for labels

15 sitios de import en 6 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

carlosmartinpavon
cmp-packages
dietaly
easycharter
elliot
gestorsalon

El componente, montado

Cargando el componente del paquete instalado…

Cómo se usa

import { Slider } from '@solu30/ui-kit/input'

Props

15 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
value	sí	`number \| [number, number]`	Current value (number for single, tuple for dual)
onChange	sí	`(value: number \| [number, number]) => void`	Callback when value changes
onDragEnd	opcional	`(value: number \| [number, number]) => void`	Callback when drag ends (optional)
min	opcional	`number`	Minimum value
max	opcional	`number`	Maximum value
step	opcional	`number`	Step increment
dual	opcional	`boolean`	Enable dual-thumb range mode
disabled	opcional	`boolean`	Whether the slider is disabled
size	opcional	`'sm' \| 'md' \| 'lg'`	Size variant
showLabels	opcional	`boolean`	Whether to show min/max labels
labels	opcional	`{ min?: string; max?: string; }`	Custom labels for min/max
trackClassName	opcional	`string`	Custom CSS classes for track, active track, and thumb
activeTrackClassName	opcional	`string`	—
thumbClassName	opcional	`string`	—
className	opcional	`string`	Additional CSS class

Ejemplo del paquete

// Single value slider
<Slider value={50} onChange={(v) => setValue(v)} />

// Dual range slider
<Slider value={[25, 75]} onChange={(v) => setRange(v)} dual />

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.