Slider

Slider allows users to select a value or range from a continuous scale by dragging a thumb along a track. It's ideal for adjusting settings like volume, brightness, or price ranges.

Built on Slider

Installation#

npmpnpmyarnbun

npx sugarcoat add slider

Examples#

Default#

Default

Controlled#

Use value and onValueChange for controlled state.

Controlled

With Value Display#

With Value

Sizes#

Available in multiple sizes.

Sizes

Colors#

Slider supports different color variants.

Colors

Range Selection#

Use two thumbs for range selection.

Range

With Steps#

Steps

Custom Range#

Custom Range

Disabled#

Disabled

Anatomy#

<Slider defaultValue={[50]}>
  <Slider.Value />
  <Slider.Control>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    <Slider.Thumb />
  </Slider.Control>
</Slider>

Usage#

Import

import { Slider } from "@sugarcoat/ui-nxt";

Usage

<Slider 
value={value} 
onValueChange={setValue}
min={0}
max={100}
>
<Slider.Control>
  <Slider.Track>
    <Slider.Range />
  </Slider.Track>
  <Slider.Thumb />
</Slider.Control>
</Slider>

Props#

Slider (Root)#

Prop	Type	Default	Description
value	number[]	-	Controlled value (array for range support)
defaultValue	number[]	-	Default value (uncontrolled)
onValueChange	(value: number[]) => void	-	Callback when value changes
min	number	0	Minimum value
max	number	100	Maximum value
step	number	1	Step increment
size	"sm" \| "md" \| "lg"	"md"	Size of the slider
color	"default" \| "primary" \| "accent"	"primary"	Color variant
disabled	boolean	false	Whether the slider is disabled
orientation	"horizontal" \| "vertical"	"horizontal"	Orientation of the slider
css	SystemStyleObject	-	Additional CSS styles using Panda CSS syntax

Accessibility#

Built on Base UI Slider for robust accessibility
Full keyboard support with arrow keys
Page Up/Down for larger increments
Home/End to jump to min/max values
ARIA attributes set automatically
Focus visible styles for keyboard users