NOCTA UI

Slider

A customizable range slider component with variants, orientations, and accessibility support for value selection

Installation

Install the Slider component using the nocta-ui CLI:

npx @nocta-ui/cli add slider

Import the component:

import { Slider } from '@/components/ui/slider';

Examples

Default Slider

Basic slider

Show Value

Slider with value display42

Custom Range & Formatting

Temperature (16°C - 30°C)22°C
Volume (0 - 10)7

Step Values

Stepped slider20

Vertical Orientation

Vertical slider30

Disabled State

Disabled slider

Api Reference

Prop

Type

Select

A flexible select component for choosing from a list of options with multiple sizes and dark mode support

Switch

A toggle switch component for binary choices with multiple variants, sizes and dark mode support

On this page

Installation
Examples
Default Slider
Show Value
Custom Range & Formatting
Step Values
Vertical Orientation
Disabled State
Api Reference