Elastic Slider
A slider whose thumb stretches with spring physics — drag past the boundary and the track extends like a rubber band, then springs back.
A slider with damped physics: drag past an end point and the track extends against resistance while the icons are pushed aside by the thumb, then springs back on release. It supports controlled and uncontrolled modes, keyboard operation, and the reduce-motion preference.
npx shadcn@latest add https://webberui.com/r/elastic-slider.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<ElasticSlider />
Installation
npx shadcn@latest add https://webberui.com/r/elastic-slider.jsonOr, once registries are configured in components.json, install it as @webberui/elastic-slider.
Usage
import { ElasticSlider } from "@/components/ui/elastic-slider";
<ElasticSlider defaultValue={40} showValue />;Controlled usage: pass value and onValueChange.
const [value, setValue] = React.useState(50);
<ElasticSlider value={value} onValueChange={setValue} />;Props
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | number | 50 | Initial value in uncontrolled mode |
value | number | — | Controlled value; when provided, it is driven by external state |
onValueChange | (value: number) => void | — | Callback for value changes (fires on drag, keyboard, and click alike) |
min | number | 0 | Minimum value |
max | number | 100 | Maximum value |
step | number | 1 | Step size; set 0 for a continuous value |
leftIcon | React.ReactNode | <Minus /> | Icon on the left (decrease end) |
rightIcon | React.ReactNode | <Plus /> | Icon on the right (increase end) |
showValue | boolean | false | Whether to show the current value |
maxOverflow | number | 50 | Maximum overflow past the boundary (px); higher is more elastic |
className | string | — | Forwarded to the outermost container |
Accessibility
- The container carries
role="slider"witharia-valuemin/aria-valuemax/aria-valuenow, and is focusable - Keyboard support: arrow keys adjust by one step,
Home/Endjump to the minimum and maximum - When the user has "reduce motion" enabled at the system level, the stretch and spring-back animations are disabled and only the live value reading remains
Inline Edit Field
A click-to-edit inline field — the display and edit states swap seamlessly with a layout morph, Enter/blur submits and Esc cancels, with multiline support, controlled and uncontrolled modes, and no accidental submit mid-IME-composition.
Password Strength Input
A password input with a live strength meter, a rule checklist, and a reveal toggle.