Slider

beta

The Slider component allows users to select a single value or a range by dragging thumbs along a track. Built on Radix UI Slider with custom styling.

Severity Slider

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

Usage

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)}
/>

API Reference — 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

API Reference — 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