Slider

Slider handles horizontal and vertical range input, inset icons, value indicators, and directional layouts with keyboard-friendly behavior.

The value indicator is rendered as a manual popover so it stays in the browser top layer instead of being clipped by parent overflow. Its animated position is driven by Slider CSS variables and transform-style movement; avoid overriding the animated --percent path from app code.

2

Value: 2

Anatomy

Highlight

Element	Part	Selector
<div>	root	[data-scope="slider"][data-part="root"] left_clickLMBCopy
<div>	track-active	[data-scope="slider"][data-part="track-active"] left_clickLMBCopy
<div>	track-inactive	[data-scope="slider"][data-part="track-inactive"] left_clickLMBCopy
<div>	handle	[data-scope="slider"][data-part="handle"] left_clickLMBCopy
<div>	value-indicatorconditional	[data-scope="slider"][data-part="value-indicator"] left_clickLMBCopy
<span>	value-indicator-text	[data-scope="slider"][data-part="value-indicator-text"] left_clickLMBCopy

Props

Name	Description	Default	Control
verticalOptional	Whether the slider is vertical. boolean | undefined	false
directionOptional	The direction of the slider. ltrrtl	"ltr"	checkltrrtl
minRequired	The minimum value of the slider. number	-
maxRequired	The maximum value of the slider. number	-
stepRequired	The step value of the slider. number	-
wheelStepOptional	The amount the value changes when using the mouse wheel. number | undefined	-
lowerLimitOptional	The lower limit for the slider value. number | undefined	-
upperLimitOptional	The upper limit for the slider value. number | undefined	-
sizeOptional	The size of the slider. smalllargeextra-smallmediumextra-large	"medium"	smalllargeextra-smallcheckmediumextra-large
startIconOptional	Name of the inset icon shown at the start side of the track. string | undefined	-
endIconOptional	Name of the inset icon shown at the end side of the track. string | undefined	-
disabledOptional	- boolean | undefined	false
valueIndicatorOptional	- boolean | undefined	true	check
valueIndicatorPlacementOptional	- startendbottomtop	-	startendbottomtop
formatterOptional	- { valueToText: (value: number) => string; textToValue: (text?: string | undefined) => number | undefined; } | undefined	-	-
stopIndicatorsOptional	- number[] | undefined	-
valueRequired	- number	-

Events1

Name	Type	Description
update:value	[value: number]	-

Slots0

No slots documented.

Styling7

Preview

Token	Description
--md-slider-active-track-colorColor Fallbackvar(--md-sys-color-primary)	Controls active track color.
--md-slider-inactive-track-colorColor Fallbackvar(--md-sys-color-primary-container)	Controls inactive track color.
--md-slider-handle-colorColor Fallbackvar(--md-sys-color-primary)	Controls handle color.
--md-slider-active-icon-colorColor Fallbackvar(--md-sys-color-on-primary)	Controls icon color on the active track.
--md-slider-inactive-icon-colorColor Fallbackvar(--md-sys-color-primary)	Controls icon color on the inactive track.
--md-slider-value-indicator-backgroundColor Fallbackvar(--md-sys-color-inverse-surface)	Controls value indicator container color.
--md-slider-value-indicator-colorColor Fallbackvar(--md-sys-color-inverse-on-surface)	Controls value indicator label color.

Examples

Default

2

Value: 2

Directions

ltr

2

rtl

2

Vertical

ltr

2

rtl

2

Sizes

extra-small

2

small

2

medium

2

large

2

extra-large

2

Value Indicator Placements

top

2

bottom

2

start

2

end

2

Inset Icons

brightness_6brightness_7

48

Disabled

2