Skip to main content
ninna-ui

Slider

Slider component for selecting numeric values with support for ranges, steps, and multiple sizes.

import { Slider } from "@ninna-ui/forms"
pnpm add @ninna-ui/forms

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Import and use the Slider component in your application.

import { Slider } from "@ninna-ui/forms";


export default function Example() {
  return (
    <Slider defaultValue={[50]} />
  );
}

Basic

Basic slider with default value.

Variants

Slider with different display options including labels and marks.

Default

With Label

50

With Marks

Sizes

Slider comes in 3 sizes: sm, md, and lg.

Small

Medium

Large

Colors

Slider supports multiple color themes.

Range Slider

Slider with two thumbs for selecting a range.

25 - 75

Marks

Slider with marks on the track.

Boolean marks (auto)
Custom marks with labels

Orientation

Slider in horizontal and vertical orientations.

Horizontal (default)
Vertical

Inverted

Slider with inverted direction.

Normal
Inverted

Min Steps Between

Range slider with minimum steps between thumbs.

Min 10 steps between thumbs
25 - 75
Min 20 steps between thumbs
20 - 80

Show Value

Slider with value display and custom formatting.

50
$25 - $75
60%

With Label

Slider with label and value display.

75

With Tooltip (Recipe)

Composition recipe showing how to add a tooltip that follows the thumb during drag.

Composition recipe: Wrap Slider with tooltip using pointer events on a container.

Current value: 50

React Hook Form

Slider works with React Hook Form using the Controller pattern.

50
20 - 80

API Reference

Complete list of props for the Slider component.

Props

PropTypeDefaultDescription
size'sm' | 'md' | 'lg''md'Size of the slider
color'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'danger''primary'Color theme of the slider
variant'solid' | 'outline''solid'Visual variant of the slider
valuenumber[]-Controlled value (array for range sliders)
defaultValuenumber[][50]Default value for uncontrolled usage
onValueChange(value: number[]) => void-Callback when value changes
onValueCommit(value: number[]) => void-Callback when value is committed (on mouse up)
minnumber0Minimum value
maxnumber100Maximum value
stepnumber1Step increment
labelReactNode-Label for the slider
helperTextReactNode-Helper text below slider
showValuebooleanfalseShow current value
showTooltipbooleanfalseShow tooltip on hover/drag
formatValue(value: number) => string-Format function for value display
marksSliderMark[] | boolean-Marks to display on the slider track
orientation'horizontal' | 'vertical''horizontal'Orientation of the slider
invertedbooleanfalseWhether the slider is inverted
minStepsBetweenThumbsnumber-Minimum steps between thumbs for range sliders
invalidbooleanfalseWhether the slider is in an invalid state
disabledbooleanfalseWhether the slider is disabled
namestring-Name for form submission

Accessibility

  • Built on Radix UI Slider for full WAI-ARIA compliance
  • Uses role="slider" with aria-valuemin, aria-valuemax, and aria-valuenow
  • Supports aria-label and aria-labelledby via props spread
  • Keyboard navigation: Arrow keys to adjust value, Home/End for min/max
  • Labels are properly associated via label prop
  • Proper focus states with visible outlines