Slider

Form Controls

Stable

v1.0.0

Range slider for selecting numeric values or a range. Built on Radix Slider. Pass an array to value for range mode.

Quick Import

import { Slider } from "@cohere-ai/waypoint-ui/slider";

Live Preview

Loading Slider...

Name	Type	Default	Description
`min`	`number`	`0`	Minimum value
`max`	`number`	`100`	Maximum value
`step`	`number`	`1`	Step increment
`value`	`number[]`	-	Controlled value(s) — array for range slider
`defaultValue`	`number[]`	-	Default value(s)
`onValueChange`	`function`	-	Callback on change
`disabled`	`boolean`	`false`	Disables the slider

Basic slider starting at 50

1 import { Slider } from '@cohere-ai/waypoint-ui/slider';
2  
3 <Slider defaultValue={[50]} max={100} step={1} />

Two-handle range slider

1 import { Slider } from '@cohere-ai/waypoint-ui/slider';
2  
3 <Slider defaultValue={[20, 80]} max={100} step={5} />

These components work well together or serve similar purposes.

Text input field accepting all native <input> HTML attributes. Pair with Label, Form, or InputGroup for complete form controls.

Linear progress bar for showing task completion. Built on Radix Progress. RTL flips the fill direction automatically.

If you've encountered a bug or have feedback about the Slider component, please report it to our team. Your feedback helps us improve Waypoint.

Available for all users • Issue will be created in Linear

Your feedback helps us improve our documentation.

1	import { Slider } from '@cohere-ai/waypoint-ui/slider';
2
3	<Slider defaultValue={[50]} max={100} step={1} />

1	import { Slider } from '@cohere-ai/waypoint-ui/slider';
2
3	<Slider defaultValue={[20, 80]} max={100} step={5} />