Navegación
Gratis
Deslizador elástico
Deslizador (role slider, teclado completo) que se estira como goma al arrastrarlo más allá de sus límites y regresa con rebote; la pista se aplasta para conservar el volumen.
- Plan
- Gratis · MIT
- Dependencias
- Solo React
- Props
- 14 (12 ajustables)
Instalación
1. Instala el paquete
npm i furin2. Impórtalo
import { ElasticSlider } from "furin";También con pnpm add furin, yarn add furin o bun add furin. Cada componente trae su CSS y lo importa por ti.
Props
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| min | number | 0 | Valor mínimo. |
| max | number | 100 | Valor máximo. |
| step | number | 1 | Paso entre valores. |
| value | number | "" | Valor actual (modo controlado). |
| defaultValue | number | 62 | Valor inicial (modo libre). |
| onChange | (value: number) => void | "" | Se llama al cambiar el valor. |
| label | string | "Brillo" | Texto del control (también su etiqueta accesible). |
| showValue | boolean | true | Muestra el valor numérico. |
| unit | string | "%" | Sufijo del valor, por ejemplo "%". |
| stretch | number | 56 | Cuánto se estira al pasar los límites, en px. |
| icon | "brightness" | "volume" | "none" | "brightness" | Íconos de los extremos. |
| color | string | "#F3F4F7" | Color del relleno. |
| damping | number | 0.28 | Rebote al regresar: 0.2 rebota mucho, 0.6 casi no. |
| autoplay | boolean | false | Se arrastra solo, pasándose de los límites, hasta que lo tocas. |
Sigue explorando
Marquesina
GratisMarquesina infinita sin saltos: el cursor la frena y la empuja con inercia, las filas van en sentidos opuestos y el foco del teclado la pausa.
Navegación
Notificaciones
GratisNotificaciones apiladas como cartas: se despliegan al pasar el cursor o enfocar, se pausan mientras las lees, se cierran solas y se anuncian con aria-live.
Navegación