The library is still in early development. Breaking changes and bugs may occur without prior notice. Thanks for your interest in using the library!

v0.2.49Beta

Search

Slider

Source

A component that allows users to select a value from a given range.

Usage

Import the Slider component from @bun-ui/react and use it in your project:

import { Slider } from "@bun-ui/react"
<Slider defaultValue={50}/>

Examples

Color

Size

Controlled

With Icon

Range

The slider can be used to set the start and end of a range by setting value of isRange to true. The value or defaultValue must be an array of two numbers.

Props

Slider

PropTypeDefaultDescription
color
"primary" | "secondary" | "neutral""primary"

Color of the slider

defaultValue
number | number[]-

The default value of the slider when the component is uncontrolled.

isRange
booleanfalse

If true, the slider will be rendered as a range slider with two thumbs. If false, it will be a single thumb slider.

maxSliderThumb
ReactNode-

The component to render as the maximum slider thumb when isRange = true, when isRange is false, this prop will do nothing.

minSliderThumb
ReactNode-

The component to render as the minimum slider thumb when isRange = true, when isRange is false, this prop will apply to the single slider thumb.

size
"sm" | "md" | "lg""md"

Size of the slider

value
number | number[]-

The value of the slider. This prop is used to control the slider. When isRange is true, this prop should be an array of two numbers. Otherwise, it should be a single number.