❤️ Support our project - Your donation helps us continue developing awesome tools!


Docs
Slider

Slider

An input where the user selects a value from within a given range.

A slider component.

Installation

npx nyxb@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.