The library is still in early development. Breaking changes and bugs may occur without prior notice. Thanks for your interest in using the library!
A component that allows users to select a value from a given range.
Import the Slider component from @bun-ui/react and use it in your project:
import { Slider } from "@bun-ui/react"<Slider defaultValue={50}/>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.
| Prop | Type | Default | Description |
|---|---|---|---|
color | "primary" | "secondary" | "neutral" | "primary" | Color of the slider |
defaultValue | number | number[] | - | The default value of the slider when the component is uncontrolled. |
isRange | boolean | false | 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. |