wiki-Slider

Ver en Git

---

Slider

El componente Slider proporciona una interfaz interactiva y personalizable para seleccionar valores o rangos de valores en forma de barra deslizante. Está construido sobre la librería react-slider.

---

Referencia de la API

Props

Propiedad	Tipo	Por Defecto	Descripción
className	string	undefined	Clase CSS adicional para estilizar el contenedor del slider.
value	number | number[]	Obligatorio	Valor actual del slider. Puede ser un número (modo simple) o un array (modo rango).
onChange	(points: number | number[]) => void	undefined	Función llamada al mover el slider. Recibe el nuevo valor o rango.
onStop	(points: number | number[]) => void	undefined	Función llamada al finalizar el movimiento del slider.
min	number	0	Valor mínimo permitido en el slider.
max	number	100	Valor máximo permitido en el slider.
step	number	1	Incrementos entre valores permitidos.
trackColors	string[]	undefined	Colores de fondo para las pistas del slider.
thumbColor	string	undefined	Color del control deslizante (thumb).
tracks	string[] | false	undefined	Etiquetas personalizadas para los valores del slider. Si es false, no se muestran.
vertical	boolean	false	Indica si el slider es vertical.

---

Ejemplo de Uso

Slider Horizontal

import { Slider } from '@auravant/ui-kit';

const handleChange = (value: number | number[]) => {
 console.log('Nuevo valor:', value);
};

<Slider
 value={50}
 min={0}
 max={100}
 step={5}
 onChange={handleChange}
 trackColors={['#FF5733', '#33FF57']}
 thumbColor="#337FFF"
/>;