🤎 Enjoying my work? Buy me a coffee to support my coding adventures! ☕


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.