Elastic Slider

Below is an elastic slider component, better than the native html range input

ElasticSlider

Volume

30%

Width

10px

Efficiency

0.95

Installation

$ pnpm dlx shadcn@latest add https://pulseui-henna.vercel.app/registry/ElasticSlider.json

Props

PropTypeisCompulsoryDescription
min
number
true

The minimum value of the slider

max
number
true

The maximum value of the slider

step
number
true

The minimum increment or decrement value of the slider

defaultValue
number
true

The default value of the slider

label
string
true

A label or name of the value selected

unit
string
false

The unit of the value selected

onChange
(value: number) => void
true

Sets the state of value

Usage