Slider

A custom range slider with support for single value, range (two thumbs), vertical orientation, and multiple sizes.

Basic

Show Value

Volume Control

A large slider matching common media player designs.

Sizes

Range

Pass a [min, max] tuple to enable two-thumb range selection.

Range with Step

Step Marks

Enable showSteps to display visible tick marks at each step interval.

Vertical

Vertical Sizes

Equalizer

Vertical sliders composed into a frequency equalizer.

Min / Max / Step

Controlled

Colors

Disabled

Props

Prop	Type	Default	Description
`value`	`number \| [number, number]`	—	Controlled value. Pass a tuple for range mode.
`defaultValue`	`number \| [number, number]`	`0`	Default value (uncontrolled). Pass a tuple for range mode.
`onValueChange`	`(value: number \| [number, number]) => void`	—	Called when the value changes.
`min`	`number`	`0`	Minimum value.
`max`	`number`	`100`	Maximum value.
`step`	`number`	`1`	Step increment.
`color`	`"blue" \| "red" \| "green" \| "yellow" \| "purple" \| "neutral" \| string`	`"blue"`	Accent color for the slider track and thumb.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Track and thumb size.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Slider orientation.
`disabled`	`boolean`	`false`	Disables the slider.
`label`	`string`	—	Label displayed above the slider.
`showValue`	`boolean`	`false`	Displays the current value next to the label.
`showSteps`	`boolean`	`false`	Displays visible tick marks at each step interval on the track.
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

value

number | [number, number]

Controlled value. Pass a tuple for range mode.

defaultValue0

number | [number, number]

Default value (uncontrolled). Pass a tuple for range mode.

onValueChange

(value: number | [number, number]) => void

Called when the value changes.

min0

number

Minimum value.

max100

number

Maximum value.

step1

number

Step increment.

color"blue"

Accent color for the slider track and thumb.

size"md"

"sm" | "md" | "lg"

Track and thumb size.

orientation"horizontal"

"horizontal" | "vertical"

Slider orientation.

disabledfalse

boolean

Disables the slider.

label

string

Label displayed above the slider.

showValuefalse

boolean

Displays the current value next to the label.

showStepsfalse

boolean

Displays visible tick marks at each step interval on the track.

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}