Elastic Slider: Spring Physics Slider for React (Free)

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add elastic-slider.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Maximummax

100

Step (0 for continuous)step

Show valuesshowValue

Elastic overscroll (px)maxOverflow

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<ElasticSlider/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/elastic-slider.en.json

Or, 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" with aria-valuemin / aria-valuemax / aria-valuenow, and is focusable
Keyboard support: arrow keys adjust by one step, Home / End jump 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

Elastic Slider