Version 0.13.1

Slider

A slider for selecting numeric values, supporting both single values and ranges with customizable formatting and validation.

200 – 800

Usage#

import { Slider } from '@backstage/ui';

<Slider
  label="My Range"
  minValue={0}
  maxValue={100}
  defaultValue={[25, 75]}
/>

API reference#

PropTypeDefaultDescription
label
string
-The label text for the slider.
description
string
-Additional description text displayed below the label.
secondaryLabel
string
-Optional secondary label displayed next to the main label (e.g., "Optional").
isRequired
boolean
-Whether the field is required. Displays "Required" in the label if true.
minValue
number
0The minimum value of the slider.
maxValue
number
100The maximum value of the slider.
step
number
1The step increment for slider values.
value
number[number, number]
-Controlled value. Use a single number for a single-thumb slider, or an array [min, max] for a range slider. Use with onChange for controlled behavior.
defaultValue
number[number, number]
minValue or [minValue, maxValue]Initial value for uncontrolled usage. Use a single number for a single-thumb slider, or an array [min, max] for a range slider.
onChange
(value: number | [number, number]) => void
-Called when the slider value changes.
onChangeEnd
(value: number | [number, number]) => void
-Called when the user stops dragging, useful for triggering actions only on final values.
formatOptions
-Intl.NumberFormat options for formatting the displayed value (e.g., { style: "currency", currency: "USD" }).
isDisabled
boolean
-Prevents user interaction when true.
orientation
horizontalvertical
horizontalThe orientation of the slider.
name
string
-Form field name for form submission.
aria-label
string
-Accessible label for screen readers when no visible label is provided.
aria-labelledby
string
-ID of an element that labels the slider for accessibility.
className
string
-Additional CSS class name for custom styling.
style
CSSProperties
-Inline CSS styles object.

Inherits all React Aria Slider props.

Examples#

Single value#

Use a single number as the default value to create a single-thumb slider.

50

Custom range#

Define custom minimum, maximum, and step values for specific use cases.

0 – 20

Formatted values#

Use the formatOptions prop with standard Intl.NumberFormat options to customize how values are displayed.

$2,000 – $8,000

With description#

Add helpful context with a description below the label.

Select the age range for your target audience
18 – 65

Required#

Mark a field as required to show a "Required" indicator in the label.

20 – 80

Disabled#

30 – 70

Theming#

Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.

  • bui-Slider
  • bui-SliderHeader
  • bui-SliderTrack
  • bui-SliderTrackFill
  • bui-SliderThumb
  • bui-SliderOutput

Changelog#