ElasticSlider
elastic-sliderAdds elastic track deformation and spring feedback to a numeric slider.
Usage
Basic usage
The default volume slider, when dragged to both ends, the track will stretch and rebound like a rubber band.
40
<ElasticSlider defaultValue={40} />Custom icon
Replace the icons at both ends with leftIcon / rightIcon, such as brightness adjustment.
65
<ElasticSlider
defaultValue={65}
leftIcon={<SunDim className="size-5" aria-hidden />}
rightIcon={<Sun className="size-5" aria-hidden />}
/>Step size adsorption
After turning on isStepped, drag and press stepSize to round and adsorb.
30
<ElasticSlider defaultValue={30} isStepped stepSize={10} />Customized range
startingValue / maxValue sets the upper and lower bounds, and showValue can hide the value.
<ElasticSlider
defaultValue={0}
startingValue={-50}
maxValue={50}
showValue={false}
/>When to use
Use ElasticSlider for an expressive, pointer-driven value such as volume or brightness. Use the standard Slider when the value belongs in a validated form, requires complete keyboard semantics, or must align with Input and Select controls. ElasticSlider is an uncontrolled presentation component that prioritizes drag feedback over form semantics.
Import
import { ElasticSlider } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| defaultValue | number | 50 | Initial value. Internal state is initialized on mount and resynchronized if this prop changes. |
| startingValue | number | 0 | Value at the left end of the track. |
| maxValue | number | 100 | Value at the right end of the track. |
| isStepped | boolean | false | Snaps dragged values to stepSize increments. |
| stepSize | number | 1 | Snap increment when isStepped is true. |
| showValue | boolean | true | Shows the current numeric value above the center of the track. |
| className | string | — | Additional class name for the root container. |
| style | CSSProperties | — | Inline styles for the root container. |
Events
| Event | Type | Description |
|---|---|---|
| onValueChange | (value: number) => void | Called with each new value produced while dragging. |
Slots
| Slot | Type | Description |
|---|---|---|
| leftIcon | ReactNode | Icon at the lower-value end; it shifts and scales during left-side overdrag. |
| rightIcon | ReactNode | Icon at the higher-value end; it shifts and scales during right-side overdrag. |
Usage guidelines
- Uncontrolled:
defaultValueinitializes internal state and resynchronizes when the prop changes. PersistonValueChangeresults if the application needs to read the current value elsewhere. - Overdrag stretches beyond the track in both axes. Leave overflow space around the component and avoid clipping it with
overflow-hidden.
Related
Input · Textarea · Select · Checkbox · CheckboxGroup · Radio
Playground
50
<ElasticSlider
defaultValue={50}
startingValue={0}
maxValue={100}
isStepped={false}
stepSize={10}
showValue={true}
/>