Wedges

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.

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.

Slider.Track

The track that contains the Slider.Range.

Slider.Range

The range part. Must live inside Slider.Track.

Slider.Thumb

The range part. Must live inside Slider.Track.

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: