Components

Slider

A control for choosing a numeric value or range along a track.

Basic example

Alert threshold75%

Notify the on-call channel when monthly compute spend passes 75% of budget.

Installation

Choose the package when you want centralized updates, or copy the source through the registry when you want local ownership.

@constructive-io/ui

Install the package, import its global tokens once, then use this exact subpath.

# install

pnpm add @constructive-io/ui

# app/globals.css

@import '@constructive-io/ui/globals.css';

# import

import { Slider } from '@constructive-io/ui/slider';

When to use

Use Slider for a numeric value where position on a track communicates magnitude, such as a spend threshold, connection pool size, or retention window.
Use Input when the exact value matters more than its position, when the range is unbounded, or when people need to paste or type a precise number.

Basic usage

Give every Slider an accessible name with aria-label or aria-labelledby. Use defaultValue when the control can own its initial value.

npm source

tsx

'use client';
import { Slider } from '@constructive-io/ui/slider';
export function BasicSliderDemo() {
    return (<div className="w-full max-w-sm">
        <Slider aria-label="Spend threshold" defaultValue={40}/>
      </div>);
}

Controlled and uncontrolled value

Use defaultValue when Slider can own its state. Pass value and onValueChange when the number is synchronized with application or server state. An array value renders one thumb per entry.

Controlled and uncontrolled value

Connection pool size60

Examples

01Setting with readoutPair the slider with a visible label and the formatted current value so the track never has to carry meaning alone.

Alert threshold75%

Notify the on-call channel when monthly compute spend passes 75% of budget.

02RangePass an array as the value to render multiple thumbs for a lower and upper bound.

Autoscaling window20 – 80 CU

Accessibility

Give every Slider an accessible name. The aria-label on the root is forwarded to each thumb input; multi-thumb sliders receive per-thumb names.
Arrow keys step the focused thumb, Page Up and Page Down move by larger steps, and Home and End jump to the bounds.
Keep the current value visible as text near the slider so position alone is not the only signal.
Do not use a slider when small step differences are consequential — a thumb is imprecise compared to typed input.

API Reference

Constructive-specific behavior is listed here. Each part links to its inherited platform or primitive contract.

Slider

Base UI slider root with a Constructive track, indicator, and thumb treatment.

Prop	Type	Default	Description
value	number \| number[]	—	Controlled value. An array renders one thumb per entry.
defaultValue	number \| number[]	—	Initial uncontrolled value.
onValueChange	(value: number \| number[], eventDetails) => void	—	Runs when the value changes.
min	number	0	Minimum value.
max	number	100	Maximum value.
step	number	1	Step between selectable values.
orientation	'horizontal' \| 'vertical'	'horizontal'	Axis the track runs along.
disabled	boolean	false	Prevents interaction and form changes.
name	string	—	Name used by the hidden form input.
aria-label	string	—	Accessible name forwarded to each thumb input.

Also accepts Base UI Slider props.