Animated Range Slider
An animated slider component for React that combines shadcn/ui slider with Number Flow for smooth transitions, formatted values, and interactive numeric controls.
Width
Dual Range
Position
Static
Installation
npx uilayouts@latest add slider
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | React.ReactNode or (value?: number) => ReactNode | undefined | The content for the label, either as a node or a function receiving the current value. |
labelPosition | 'top' | 'bottom' | 'static' | 'top' | The position of the label relative to the slider thumb. |
lableContenPos | 'left' | 'right' | 'right' | The position of the label content within the label block. |
className | string | undefined | Additional class name(s) for the outer container of the slider. |
value | number[] | undefined | The current value(s) of the slider. Can be a single value or a range (array). |
min | number | undefined | The minimum value allowed for the slider. |
max | number | undefined | The maximum value allowed for the slider. |
step | number | undefined | The step increment for the slider values. |
ref | React.RefObject | undefined | A React ref object for the slider's root element. |
Inspire from shadcn/ui expansions