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

Secondary Slider

Sizes

Show Value

42

Custom Range & Formatting

22°C
7

Step Values

20

Vertical Orientation

Default
Secondary Large

Disabled State

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
Secondary Slider
Sizes
Show Value
Custom Range & Formatting
Step Values
Vertical Orientation
Disabled State
Api Reference