Slider

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

Pair with Field.* for description/error wiring in forms. Pass aria-label to Slider so the rendered thumb has an accessible name:

Volume

Drag to adjust playback volume.

1import { Field } from "@ngrok/mantle/field";2import { Slider } from "@ngrok/mantle/slider";3 4<Field.Item name="volume">⋯5	<Field.Label>Volume</Field.Label>6	<Field.Control>⋯7		<Slider aria-label="Volume" defaultValue={67} max={100} step={1} />8	</Field.Control>9	<Field.Description>Drag to adjust playback volume.</Field.Description>10</Field.Item>;

Or render the control on its own:

1import { Slider } from "@ngrok/mantle/slider";2 3<Slider aria-label="Volume" defaultValue={67} max={100} step={1} />4<Slider aria-label="Disabled volume" defaultValue={67} max={100} step={1} disabled />5<Slider aria-label="Vertical volume" defaultValue={67} max={100} step={1} orientation="vertical" />

Examples

With TanStack Form

Use @tanstack/react-form with zod to keep a single-thumb slider controlled. Radix emits slider values as an array, so pass the first value into field.handleChange.

1import { Button } from "@ngrok/mantle/button";2import { Field, toErrorMessages } from "@ngrok/mantle/field";3import { Slider } from "@ngrok/mantle/slider";4import { useForm } from "@tanstack/react-form";5import { z } from "zod";6 7export const formSchema = z.object({⋯8	volume: z.number().min(25, "Choose at least 25."),9});10function Example() {⋯11	const defaultValues = {⋯12		volume: 50,13	};14	const form = useForm({⋯15		defaultValues,16		validators: {⋯17			onSubmit: formSchema,18		},19		onSubmit: ({ value }) => {⋯20			// Handle form submission here21		},22	});23 24	return (25		<form⋯26			onSubmit={(event) => {⋯27				event.preventDefault();28				event.stopPropagation();29				void form.handleSubmit();30			}}31		>32			<form.Field name="volume">⋯33				{(field) => (34					<Field.Item name={field.name}>⋯35						<Field.Label>Volume</Field.Label>36						<Field.Control>⋯37							<Slider⋯38								aria-label="Volume"39								value={field.state.value}40								onBlur={field.handleBlur}41								onValueChange={(value) => field.handleChange(value[0] ?? 0)}42								max={100}43								step={1}44							/>45						</Field.Control>46						<Field.Errors messages={toErrorMessages(field.state.meta.errors)} />47					</Field.Item>48				)}49			</form.Field>50			<Button type="submit" appearance="filled">⋯51				Submit52			</Button>53		</form>54	);55}

Single Thumb

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

1import { Slider } from "@ngrok/mantle/slider";2 3<Slider aria-label="Volume" defaultValue={75} max={100} step={1} />;

Range

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

1import { Slider } from "@ngrok/mantle/slider";2 3<Slider aria-label="Price" defaultValue={[25, 50]} max={100} step={5} />;

Multiple Thumbs

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

1import { Slider } from "@ngrok/mantle/slider";2 3<Slider aria-label="Breakpoint" 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.

1import { Slider } from "@ngrok/mantle/slider";2 3<Slider aria-label="Warning threshold" defaultValue={67} max={100} step={1} color="bg-warning-600" />4<Slider aria-label="Danger threshold" defaultValue={67} max={100} step={1} color="bg-danger-600" />5<Slider aria-label="Success threshold" defaultValue={67} max={100} step={1} color="bg-emerald-600" />

Ticks

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

1import { Slider } from "@ngrok/mantle/slider";2 3<Slider aria-label="Volume" defaultValue={50} max={100} step={10} showTicks />4<Slider aria-label="Price" 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.
`aria-label`	`string`	—	Accessible name forwarded to the rendered thumb. Range sliders derive per-thumb labels from it.
`aria-labelledby`	`string`	—	IDREF forwarded to the rendered thumb when another element provides the accessible name.
`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.