Slider
An interactive input slider that allows users to select a value from a specified range.
Usage
import { Slider } from "@lemonsqueezy/wedges";<Slider />For more advanced usage, you can use the Slider.Root component to compose your own slider. These components include pre-defined styles and accessiblity features.
<Slider.Root>
<Slider.Track>
<Slider.Range />
</Slider.Track>
<Slider.Thumb />
</Avatar.Root>API Reference
The Slider component is built on top of the Radix Slider primitive.
Slider
The Wedges component of the Slider. In most cases this is the only Slider component you will need to use.
| Prop | Value | Default |
|---|---|---|
label | ReactNode | / |
description | ReactNode | / |
tooltip | ReactNode | / |
helperText | ReactNode | / |
required | boolean | false |
disabled | boolean | false |
before | ReactNode | / |
after | ReactNode | / |
defaultValue | number[] | / |
value | number[] | / |
onValueChange | function | / |
onValueCommit | function | / |
name | string | / |
orientation | enum | "horizontal" |
dir | enum | / |
inverted | boolean | false |
min | number | 0 |
max | number | 100 |
step | number | 1 |
minStepsBetweenThumbs | number | 0 |
Slider.Root
Contains all the parts of a slider. It will render an input for each thumb when used within a form to ensure events propagate correctly.
| Prop | Value | Default |
|---|---|---|
defaultValue | number[] | / |
value | number[] | / |
onValueChange | function | / |
onValueCommit | function | / |
name | string | / |
orientation | enum | "horizontal" |
dir | enum | / |
inverted | boolean | false |
min | number | 0 |
max | number | 100 |
step | number | 1 |
minStepsBetweenThumbs | number | 0 |
| Data attribute | Value |
|---|---|
[data-disabled] | Present when disabled |
[data-orientation] | "vertical" | "horizontal" |
Slider.Track
The track that contains the Slider.Range.
| Prop | Value | Default |
|---|---|---|
asChild | boolean | false |
| Data attribute | Value |
|---|---|
[data-disabled] | Present when disabled |
[data-orientation] | "vertical" | "horizontal" |
Slider.Range
The range part. Must live inside Slider.Track.
| Prop | Value | Default |
|---|---|---|
asChild | boolean | false |
| Data attribute | Value |
|---|---|
[data-disabled] | Present when disabled |
[data-orientation] | "vertical" | "horizontal" |
Slider.Thumb
The range part. Must live inside Slider.Track.
| Prop | Value | Default |
|---|---|---|
asChild | boolean | false |
| Data attribute | Value |
|---|---|
[data-disabled] | Present when disabled |
[data-orientation] | "vertical" | "horizontal" |
[data-state] | "active" | "inactive" |
Accessibility
Adheres to the Slider WAI-ARIA design pattern.
Examples
Use orientation prop to create vertical sliders.
You can disable the slider by using the disabled prop.
Use range values:
Controlled component:
Playground: