Slider

An input where the user selects a value from within a given range.

import { Slider } from "@ngrok/mantle/slider";

<Slider defaultValue={67} max={100} step={1} />;
<Slider defaultValue={67} max={100} step={1} disabled />
<Slider defaultValue={67} max={100} step={1} orientation="vertical" />

Examples

Single Thumb

A basic slider with a single thumb for selecting a single value. You can pass a single number instead of an array.

import { Slider } from "@ngrok/mantle/slider";

<Slider defaultValue={75} max={100} step={1} />;

Range

Use two values to create a range slider with two thumbs.

import { Slider } from "@ngrok/mantle/slider";

<Slider defaultValue={[25, 50]} max={100} step={5} />;

Multiple Thumbs

Use more than two values to create a slider with multiple thumbs.

import { Slider } from "@ngrok/mantle/slider";

<Slider defaultValue={[10, 20, 70]} max={100} step={10} />;

Color

Use the color prop to change the color of the slider range. Accepts any Tailwind bg-* class.

import { Slider } from "@ngrok/mantle/slider";

<Slider defaultValue={67} max={100} step={1} color="bg-warning-500" />;
<Slider defaultValue={67} max={100} step={1} color="bg-danger-500" />;
<Slider defaultValue={67} max={100} step={1} color="bg-emerald-500" />;

Ticks

Use the showTicks prop to show tick marks at each step interval along the track.

import { Slider } from "@ngrok/mantle/slider";

<Slider defaultValue={50} max={100} step={10} showTicks />;
<Slider defaultValue={[20, 80]} max={100} step={20} showTicks />;

API Reference

Slider

The Slider is built on top of Radix Slider. It accepts all props from the Radix Slider Root component.

defaultValue and value both accept number | number[], but they must be the same type — you cannot mix a single number with a number[].

Prop	Type	Default	Description
`color`	`bg-${string}`	`"bg-accent-500"`	The color of the slider range. Accepts any Tailwind `bg-*` class.
`defaultValue`	`number` \| `number[]`	—	The value of the slider when initially rendered. Use when you do not need to control the state of the slider.
`showTicks`	`boolean`	`false`	Whether to show tick marks along the track at each `step` interval.
`value`	`number` \| `number[]`	—	The controlled value of the slider. Must be used with `onValueChange`.
`onValueChange`	`(value: number[]) => void`	—	Event handler called when the value changes.
`onValueCommit`	`(value: number[]) => void`	—	Event handler called when the value changes at the end of an interaction (e.g. on mouse up or on blur).
`name`	`string`	—	The name of the slider. Submitted with its owning form as part of a name/value pair.
`disabled`	`boolean`	`false`	When `true`, prevents the user from interacting with the slider.
`orientation`	`"horizontal"` \| `"vertical"`	`"horizontal"`	The orientation of the slider.
`min`	`number`	`0`	The minimum value for the range.
`max`	`number`	`100`	The maximum value for the range.
`step`	`number`	`1`	The stepping interval.
`minStepsBetweenThumbs`	`number`	`0`	The minimum permitted steps between multiple thumbs.
`inverted`	`boolean`	`false`	Whether the slider is visually inverted.