Docs
Slider
Slider
An input where the user selects a value from within a given range.
Installation
npx nyxbui@latest add slider
Usage
import { Slider } from "~/components/ui/slider"
<Slider defaultValue={[33]} max={100} step={1} />
Examples
Default
Disabled
Inverted
Vertical
Range
Tick Marks
Use the showSteps
prop to define tick marks' style.
NOTE: The tick marks' positions are not 100% accurate!
Half Tick Marks
Full Tick Marks
Format Label
Use the formatLabel
prop to define how the value is shown on popover.
Format Label Side
Use the formatLabelSide
prop to indicate where the popover will appear.