⌘K

slider component

Drop-in semantic component. See examples, sizes, variants, and source.

Range and single-value slider built from a slider-container wrapping a slider with slider-track, slider-fill, and one or two slider-handle children. Drag, keyboard, and value broadcasting are mounted by slider.js.

Slider Component

Basic Slider

50%
50%
(Optional)
75%
75%

Size Variants

30%
30%
45%
45%
60%
60%
70%
70%
85%
85%

Color Variants

40%
80%
25%
60%
55%

Extended Color Palette

50%
50%
50%
50%
50%
50%
50%
50%
50%

Stepped Slider

40%
0 20 40 60 80 100
40%
75%
0 25 50 75 100
75%

Range Slider (Two Handles)

$25
$60
$25 - $60
07:12
16:48
07:12 - 16:48

Custom Value Ranges

22°C
22°C
$3,500
$3,500

Vertical Orientation

60%
60%
40%
40%
75%
75%

Live Update Example

70%
70%

Live Preview

Drag the slider to change opacity

Disabled State

50%
50%

Combined Features Example

(Select range)
20%
70%
Min 50% Max
20% - 70%
217
153
102

Class API Reference

Type Class Usage Notes
Base slider-container Outer wrapper — owns size, color, layout Always required
slider Inner slider element holding track + handles Carries data-step for step size
slider-track The bar the handle rides on Hosts the fill + handles
slider-fill Filled portion of the track Width set inline as a percentage
slider-handle Draggable thumb Range sliders use two with data-handle="min|max"
slider-tooltip Floating value bubble on the handle Shown on hover/focus/active
slider-marks / slider-mark Tick-mark labels under the track Position via inline left: %
slider-header / slider-label / slider-sublabel / slider-value Optional caption pieces Place inside slider-container
Sizes xs Tiny — 1px track, 12px handle Modifier on slider-container
sm Small — 1.5px track, 16px handle Modifier on slider-container
(default) Medium — 2px track, 20px handle No size class needed
xl Large — 2.5px track, 24px handle Modifier on slider-container
lg Big — 3px track, 28px handle Modifier on slider-container
Intents primary Blue fill + handle Modifier on slider-container
positive Green fill + handle Modifier on slider-container
negative Red fill + handle Modifier on slider-container
warning Yellow fill + handle Modifier on slider-container
info Blue (lighter) fill + handle Modifier on slider-container
Extended Palette red / orange / yellow / green / teal / blue / violet / purple / pink Direct palette colors Use intents (primary/positive/...) when possible
States disabled Greyed out, cannot drag Modifier on slider-container
Layout range Two-handle range slider Add data-handle="min|max" to each handle
vertical Vertical orientation Add to both slider-container and slider; set explicit height