Slider with elastic rubber-band drag and magnetic snap feedback.
motion-svruned
Installation
Install dependencies
Install the required packages for this component:
Copy the Source Code
Copy and paste the following code into your project:
elastic-slider-state.svelte.ts
elastic-slider.svelte
elastic-slider.utils.ts
index.ts
Usage
usage.svelte
Features
- Track stretches with rubber-band tension when dragged past bounds
- Snaps magnetically to exact steps or continuous deciles
- Inline label and value text dynamically fade to avoid handle overlap
- Supports keyboard navigation and respects prefers-reduced-motion
Examples
Default value
Set the initial value while letting the slider manage its own state.
Controlled value
Keep the value in parent state with value and onValueChange.
Parent value: 35
Currency formatting
Format the displayed value with Intl.NumberFormat.
Units and precision
Combine a fractional step with a custom unit and fixed precision.
Discrete steps
Use a short integer range for exact, visible stops.
Negative range
Configure a range that spans values below and above zero.
Live UI control
Connect multiple controlled sliders to a visual preview.
Hehe
Props
ElasticSlider
Controlled or uncontrolled elastic value slider.
| Name | Type | Default | Description |
|---|---|---|---|
label | string | required | Label displayed inside the slider track. |
value | number | undefined | Controlled slider value. |
defaultValue | number | min | Initial value when the slider is uncontrolled. |
onValueChange | (value: number) => void | undefined | Called after drag, click, or keyboard interaction changes the value. |
min | number | 0 | Minimum allowed value. |
max | number | 1 | Maximum allowed value. |
step | number | 0.01 | Increment used when snapping values. |
formatValue | (value: number) => string | undefined | Formats the value displayed in the track. |
ref | HTMLDivElement | null | null | Bindable reference to the outer slider element. |
class | string | undefined | Additional classes applied to the slider. |