fetaUI
GitHub

Slider

Pick a value or a range by dragging. Line for forms, Bold for a headline value, Field for dense inspectors, all with one or two thumbs.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/slider
Playground
Line
Bold
Field
Stepped
Labeled
Volume64%
0255075100
Price range
Price$120 to $480
Min
$120
Max
$480
Stepped sizes
T-shirt sizeM
XSSMLXL
Brightness
DisplayAuto
Night shift from sunset
Equalizer
EqualizerCustom
60
230
910
3.6K
14K
Recommended
Daily steps7,500
MinimumRecommendedGreat
Notched
Opacity30%
0%100%
Stepper
OnboardingStep 3 of 5

Drag across the dots or use the arrows

Ruler
Guests2 to 8
0246810
Inspector
Path
Shape
Color#18181B
Inverted
Disabled
Style
Icons animation
Range
Disabled
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/slider

Line

For forms. One number gives one thumb, two numbers give a range.

Disabled
Motion

Stepped

Step snaps every move, in any style.

Style
Disabled
Motion

Accessibility

  • Each thumb has role slider with a value and a text value.
  • Range thumbs are named minimum and maximum, and never cross, including typed values.
  • A typed entry is a labelled input, and a typo keeps the old value.

Motion

  • Thumbs follow the pointer one to one, and spring at 500/34 when a click makes them jump.
  • The value tip rises out of the thumb and hides 300 ms after release.
  • With reduced motion, jumps are instant and the tip shows only with alwaysTip.

Responsive behavior

  • Bold is 32 px high and Field 44 px on Mobile.

Performance

  • Thumbs and the fill run on motion values, so a drag does not wait for React.
  • A fast pointer commits once per frame through requestAnimationFrame.
  • The frame and the tip timer are cancelled on unmount.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import Slider from @/components/fetaui/slider. label is required and names the thumbs for screen readers.
  • One number gives one thumb, a two item array gives a range. onValueChange returns the same shape, so check Array.isArray when the type is shared.
  • format changes the tip and the spoken value. styleKind is line, bold or field. ticks works on bold only. Tips show on horizontal sliders that are not field.
  • Price Range, Stepper and Ruler are recipes in the demo file. The histogram, the dots and the scale are not Slider props.
/docs/components/slider/markdown
PreviousSwitch
NextSelect

Related

Liquid SliderComponentA glass that fills as you drag, with a surface that behaves like water.Detent DialComponentA rotary control that clicks into steps.FieldComponentLabel, control and help text as one unit, so they read, validate and announce together.FieldsetComponentFields grouped under a legend, in an inset card on the tray.