componente · @solu30/ui-kit/input
Slider
El componente, montado
Cargando el componente del paquete instalado…
Cargando el chunk del paquete instalado…
De dónde se importa
import { Slider } from '@solu30/ui-kit/input'Props
| 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 | { | Custom labels for min/max |
| min | opcional | string | — |
| max | opcional | string | — |
| 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. Cuatro de los 69 ejemplos del paquete traen pegada la firma cruda del .d.ts —el mismo defecto del extractor que se come las descripciones—, y por eso la caja tiene tope de alto: el ejemplo de verdad suele estar al final.