ElasticSlider (Deslizador con Pulgar Elástico)

Esta sección muestra una vista previa del componente ElasticSlider.

En esta guía presentamos el componente ElasticSlider, un deslizador numérico con física elástica en el pulgar.

Vista Previa

80

Value: 80

Código

import "@elizabthpazp/intera-ui/dist/globals.css";

import { ElasticSlider } from "@elizabthpazp/intera-ui";

export default function Home() {
  const [price, setPrice] = useState(80);
  return <ElasticSlider min={0} max={200} defaultValue={80} onChange={setPrice} darkMode />;
}

Detalles del Componente

El componente ElasticSlider consta de:

  • Una pista con progreso de relleno y pulgar con resorte (stiffness: 400, damping: 30).
  • Arrastra o haz clic en la pista para establecer el valor.
  • Muestra el valor actual con pulgar animado.

Propiedades

Nombre de PropTipoPor DefectoDescripción
minnumber0Valor mínimo.
maxnumber100Valor máximo.
defaultValuenumber50Valor inicial.
onChangefunction(v)=>{}Se ejecuta con el nuevo valor al cambiar.
darkModebooleanfalseActiva el estilo en modo oscuro si es true.
classNamestring""Clases adicionales combinadas vía cn().
styleCSSProperties-Estilos en línea.

Características

  • Arrastre elástico vía Framer Motion useSpring.
  • Responsivo max-w-[260px] con respaldo w-full.
  • Personalizable vía className/style con cn().
  • Ubicación: src/components/interactive/ElasticSlider.jsx.