Slider

Overview

The Slider component lets people pick a single value or a range by dragging thumbs along a track. It’s built on Radix UI Slider with a label, an optional live value, and description or min/max captions.

Variations

Severity slider

SeveritySlider is a specialized variant with a gradient track and two thumbs for defining severity thresholds.

Installation

import { Slider, SeveritySlider } from '@harnessio/ui/components'

// Pipeline timeout with tooltip
<Slider
  label="Pipeline timeout"
  description="Maximum execution time in minutes"
  showValue
  defaultValue={[30]}
  min={5}
  max={120}
  step={5}
  formatValue={(v) => v[0] + 'm'}
  onValueChange={(value) => console.log(value)}
/>

// Resource allocation range
<Slider
  label="CPU allocation"
  description="Min and max cores for build containers"
  showValue
  defaultValue={[2, 8]}
  min={1}
  max={16}
/>

// Deployment rollout with min-max labels
<Slider
  label="Deployment rollout"
  caption="min-max"
  minLabel="0%"
  maxLabel="100%"
  defaultValue={[25]}
/>

// Alert severity thresholds
<SeveritySlider
  label="Alert thresholds"
  defaultValue={[25, 75]}
  onValueChange={(value) => console.log(value)}
/>

Usage

Anatomy

Slider wraps a Radix Slider (track, filled range, and one thumb per value) with a label above and a caption below. It renders one thumb for a single value and two for a range — the shape of value / defaultValue decides which.

<Slider
  label="Pipeline timeout"
  showValue
  defaultValue={[30]}
  min={5}
  max={120}
/>

• Single vs range — pass one number for a single-value slider ([30]) or two for a range ([2, 8]). The number of thumbs follows the array length.
• Value display — showValue shows the current value next to the track, formatted by formatValue (defaults to the raw number, or min – max for a range).
• Caption — caption="description" (the default) shows description text below the track; caption="min-max" shows minLabel / maxLabel at the two ends instead.
• SeveritySlider — a specialized always-range variant with a gradient track and evenly-spaced labels beneath it, for defining severity thresholds.

Best practices

Do

• Give every slider a label, and add a description or min/max labels so the range’s meaning and units are clear.
• Turn on showValue (with a formatValue that includes the unit, like 30m or 25%) whenever the exact number matters.
• Set a sensible step for the domain so people can land on valid values by dragging or with the arrow keys.

Don’t

• Don’t use a slider when precision matters more than quick approximate adjustment — a number input is better for exact entry.
• Don’t rely on color alone in the SeveritySlider gradient; keep the labels so the thresholds stay legible.

Accessibility

Keyboard

• Each thumb is a Radix slider thumb: arrow keys nudge by step, Home / End jump to min / max, and Page Up / Page Down move in larger increments. In a range, the two thumbs can’t cross.

Labeling

• The label is associated with the slider via htmlFor, so it names the control for assistive tech. In a range, the two thumbs are additionally labeled “Minimum value” and “Maximum value”.
• Each thumb exposes its current value through the underlying role="slider" (aria-valuenow / aria-valuemin / aria-valuemax).

Focus & states

• Thumbs are focusable and show a focus ring. A disabled slider is skipped in the tab order and doesn’t respond to pointer or keyboard input.

Properties

Properties

Slider

Prop	Required	Default	Type
label	false		string
caption	false	'description'	'description' | 'min-max'
description	false		string
minLabel	false	'0'	string
maxLabel	false	'100'	string
showValue	false	false	boolean
formatValue	false		(value: number[]) => string
defaultValue	false		number[]
value	false		number[]
onValueChange	false		(value: number[]) => void
onValueCommit	false		(value: number[]) => void
min	false	0	number
max	false	100	number
step	false	1	number
disabled	false	false	boolean
name	false		string
className	false		string

The Slider also accepts the underlying Radix Slider Root props (except orientation).

SeveritySlider

Prop	Required	Default	Type
label	false		string
labels	false	['Low', 'Medium', 'High', 'Critical']	string[]
defaultValue	false	[20, 70]	[number, number]
value	false		[number, number]
onValueChange	false		(value: [number, number]) => void
onValueCommit	false		(value: [number, number]) => void
min	false	0	number
max	false	100	number
step	false	1	number
disabled	false	false	boolean
className	false		string