Slider

free

Slider selects a number or a range by dragging a thumb along a track.

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

export default function UsageDemo() {
  return (

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Slider

pnpm dlx nateui@latest add Slider

yarn dlx nateui@latest add Slider

Examples

Range

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

export default function RangeDemo() {
  return (

Disabled

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

export default function DisabledDemo() {
  return (

Tooltips

Show on hover

Always visible

Custom content

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

export default function TooltipsDemo() {
  return (

Marks

$20k

$50k

$80k

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

const marks = [
  { value: 20, label: '$20k' },

Capsule

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

const capsuleMarks = [
  { value: 20, label: '20' },

Step

0°C

25°C

50°C

75°C

100°C

0°C

26°C

37°C

100°C

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

const evenMarks = [
  { value: 0, label: '0°C' },

Min And Max

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

export default function MinAndMaxDemo() {
  return (

Custom Color

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

export default function CustomColorDemo() {
  return (

Controlled

Value: 50

Range: 20 – 50

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

export default function ControlledDemo() {

API

Slider selects a single value; Slider.Range selects a [start, end] pair with two thumbs. Both are uncontrolled with defaultValue or controlled with value and onChange, and both accept native div props.

Slider

Prop	Description	Type	Default
`value`	Current value in controlled mode.	`number`	-
`defaultValue`	Initial value when uncontrolled.	`number`	`0`
`onChange`	Fires with the new value while the value changes.	`(value: number) => void`	-
`onDraggingStop`	Fires with the final value when a drag or key change ends.	`(value: number) => void`	-
`min`	Lowest selectable value.	`number`	`0`
`max`	Highest selectable value.	`number`	`100`
`step`	Increment applied while dragging or using arrow keys.	`number`	`1`
`marks`	Reference points rendered under the track.	`SliderMark[]`	`[]`
`stepOnMarks`	Snap the thumb to mark values instead of stepping by step.	`boolean`	-
`variant`	Visual treatment for the slider. `capsule` uses the thicker rail and embedded marks.	`SliderVariant`	`'default'`
`precision`	Decimal places kept in the reported value.	`number`	derived from step
`tooltip`	Tooltip content, or a function of the current value.	`SliderTooltip`	identity
`showTooltipOnHover`	Show the tooltip on hover, drag, and focus.	`boolean`	`false`
`alwaysShowTooltip`	Keep the tooltip visible at all times.	`boolean`	`false`
`disabled`	Prevent interaction and dim the track.	`boolean`	`false`
`thumbAriaLabel`	Accessible label for the thumb.	`string`	-
`name`	Name of the hidden input holding the value.	`string`	-
`inputProps`	Props spread onto the hidden input.	`ComponentPropsWithoutRef<'input'>`	-
`classNames`	Class names for individual slider parts.	`SliderClassNames`	`{}`
`className`	Class names for the root element.	`string`	-
`ref`	Ref forwarded to the root element.	`Ref<HTMLDivElement>`	-
`...nativeProps`	Native props for the root `div`.	`ComponentProps<'div'>`	-

Slider.Range

Prop	Description	Type	Default
`value`	Current range in controlled mode.	`RangeSliderValue`	-
`defaultValue`	Initial range when uncontrolled.	`RangeSliderValue`	-
`onChange`	Fires with the new range while it changes.	`(value: RangeSliderValue) => void`	-
`onDraggingStop`	Fires with the final range when a drag or key change ends.	`(value: RangeSliderValue) => void`	-
`min`	Lowest selectable value.	`number`	`0`
`max`	Highest selectable value.	`number`	`100`
`minRange`	Smallest allowed distance between the two thumbs.	`number`	`0`
`maxRange`	Largest allowed distance between the two thumbs.	`number`	-
`step`	Increment applied while dragging or using arrow keys.	`number`	`1`
`marks`	Reference points rendered under the track.	`RangeSliderMark[]`	`[]`
`stepOnMarks`	Snap thumbs to mark values instead of stepping by step.	`boolean`	-
`variant`	Visual treatment for the range slider. `capsule` uses the thicker rail and embedded marks.	`SliderVariant`	`'default'`
`precision`	Decimal places kept in the reported values.	`number`	derived from step
`tooltip`	Tooltip content, or a function of a single thumb value.	`SliderTooltip`	identity
`showTooltipOnHover`	Show tooltips on hover, drag, and focus.	`boolean`	`false`
`alwaysShowTooltip`	Keep both tooltips visible at all times.	`boolean`	`false`
`disabled`	Prevent interaction and dim the track.	`boolean`	`false`
`thumbArialLabelStart`	Accessible label for the start thumb.	`string`	-
`thumbAriaLabelEnd`	Accessible label for the end thumb.	`string`	-
`name`	Base name for the hidden -from and -to inputs.	`string`	-
`inputProps`	Props spread onto both hidden inputs.	`ComponentPropsWithoutRef<'input'>`	-
`classNames`	Class names for individual slider parts.	`RangeSliderClassNames`	`{}`
`className`	Class names for the root element.	`string`	-
`ref`	Ref forwarded to the root element.	`Ref<HTMLDivElement>`	-

Types

type SliderVariant = 'default' | 'capsule'
 
type RangeSliderValue = [number, number]
 
type SliderTooltip = ReactNode | ((value: number) => ReactNode)
 
type SliderMark = { value: number; label?: ReactNode }
 
type RangeSliderMark = { value: number; tooltip?: ReactNode }
 
type SliderClassNames = {
  thumb?: string
  bar?: string
  mark?: string | ((isFilled: boolean) => string)
  track?: string
}
 
type RangeSliderClassNames = {
  thumb?: [string, string]
  bar?: string
  mark?: string
  track?: string
}