Design System Beacon

Slider

Sliders allow users to select a value or range of values from a continuous or discrete set. Use sliders for volume controls, price ranges, and other numeric inputs where visual feedback is helpful.

Overview

Sliders are interactive controls that let users select a value or range by dragging a handle along a track. They provide immediate visual feedback and are ideal for settings that don't require precise numeric input.

All slider styles are built using design tokens, ensuring consistency across themes and hues. Use the interactive playground below to explore all available combinations.

Interactive Playground

Use the controls to customize the slider and see how it looks in real-time.

Status

Show Label

Show Tooltip

Show Steps

Range Slider

Value

Slider

<Slider />

Anatomy

A slider consists of several parts that work together to create an interactive control.

Slider

LabelOptional text label above slider

TrackThe horizontal line representing the range

SelectionThe filled portion indicating selected value(s)

ThumbThe draggable handle for selecting values

Step MarkersOptional dots indicating discrete steps

Usage Guidelines

Use sliders for approximate values where precision isn't critical.
Provide clear labels indicating what the slider controls.
Use step markers when discrete values are meaningful.
Show tooltips when users need to see exact values.
Use range sliders for selecting a span of values.
Ensure sliders are large enough to be easily manipulated.
Provide visual feedback for all interactive states.

Don't

Don't use sliders for precise numeric input (use input fields instead).
Don't use sliders with too many steps (more than 20 becomes unwieldy).
Don't hide important information in tooltips without alternatives.
Don't use sliders for binary choices (use switches or checkboxes).
Don't make sliders too small to interact with easily.
Don't disable sliders without explaining why.
Don't use sliders for navigation (use buttons or links instead).

Accessibility

Always associate sliders with labels using proper HTML structure or ARIA attributes.
Ensure sufficient color contrast between track, selection, and thumb.
Provide keyboard navigation support (Arrow keys to adjust, Home/End for min/max).
Use ARIA labels to describe the slider's purpose and current value.
Ensure sliders are large enough to be easily clickable (minimum 16px thumb size).
Provide clear visual feedback for all interactive states (hover, focus, active).
Support screen readers with proper role and value announcements.

API Reference

Slider component props and types.

SliderProps

interface SliderProps {
  value?: number;
  min?: number;
  max?: number;
  step?: number;
  range?: boolean;
  rangeValue?: [number, number];
  onChange?: (value: number | [number, number]) => void;
  showTooltip?: boolean;
  showSteps?: boolean;
  stepCount?: number;
  showLabel?: boolean;
  label?: string;
  status?: "default" | "hover" | "active" | "disabled";
  disabled?: boolean;
}

Props

value

number

60

Current value for single-value slider.

rangeValue

[number, number]

[20, 80]

Current range values for range slider.

range

boolean

false

Whether to display as a range slider with two thumbs.

min

number

0

Minimum value of the slider.

max

number

100

Maximum value of the slider.

step

number

1

Step increment for slider values.

onChange

(value: number | [number, number]) => void

—

Callback function called when slider value changes.

showTooltip

boolean

false

Whether to display a tooltip showing the current value.

showSteps

boolean

false

Whether to display step markers along the track.

stepCount

number

10

Number of step markers to display when showSteps is true.

showLabel

boolean

true

Whether to display the label above the slider.

label

string

"Slider"

Text label displayed above the slider.

status

"default" | "hover" | "active" | "disabled"

"default"

Visual state of the slider: default, hover, active (focused/dragging), or disabled.

disabled

boolean

false

Whether the slider is disabled and non-interactive.

Usage Examples

Copyable code snippets for common slider use cases.

Basic Slider

import { Slider } from 'beacon-ui';

<Slider 
  value={60}
/>

Slider with Steps

import { Slider } from 'beacon-ui';

<Slider 
  value={60}
  showSteps
/>

Slider with Tooltip

import { Slider } from 'beacon-ui';

<Slider 
  value={60}
  showTooltip
  status="active"
/>

Range Slider

import { Slider } from 'beacon-ui';

<Slider 
  range
  rangeValue={[20, 80]}
/>

Range Slider with Tooltips

import { Slider } from 'beacon-ui';

<Slider 
  range
  rangeValue={[20, 80]}
  showTooltip
  status="active"
/>

Disabled Slider

import { Slider } from 'beacon-ui';

<Slider 
  value={60}
  status="disabled"
/>