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.

Value quantization

Slider preserves externally supplied value values as-is, including values between step marks. This allows a Slider to display a more precise value entered through a paired text or number input without silently changing it.

Values produced by Slider interaction are quantized consistently:

• Pointer dragging and keyboard arrows use the step grid.
• When enabled, the mouse wheel uses the wheelStep grid when provided, or the step grid otherwise. Holding Alt uses the step grid.
• Grids start at the effective lower limit, max(min, lowerLimit). The effective upper limit, min(max, upperLimit), is always selectable even when the final interval is shorter than one step.
• Home and End select the exact effective lower and upper limits.

Mouse-wheel changes are opt-in: set wheel to enable them.

<Slider v-model:value="value" :min="0" :max="100" :step="1" wheel :wheel-step="5" />

wheelStep alone does not enable wheel interaction. By default, or when disabled, Slider does not change its value or prevent page scrolling in response to wheel events.

2

Value: 2

Examples

Default

2

Value: 2

Directions

ltr

2

rtl

2

Vertical

ltr

2

rtl

2

Sizes

The size prop overrides inherited defaults, with medium as the library default. Set sliderDefaults.size in M3VuePlugin for an application default, or call provideSliderDefaults({ size: 'large' }) in an ancestor for a subtree default. The other defaults are appearance="standard", wheel=false, and valueIndicator=true; all can be set in sliderDefaults or through the helper. See component defaults.

standard

extra-small

2

small

2

medium

2

large

2

extra-large

2

expressive

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

Slider appearance

appearance="standard" is the default: a 4px neutral inactive track, a 16px circular thumb at medium size, and a separate 32px hit area. Extra-small and small use 14px thumbs; large and extra-large use 18px and 20px. size and appearance are independent. Focus uses a visible outline; hover and press add a small halo without changing geometry.

appearance="expressive" preserves the original thick track and vertical handle. Inset icons are supported only for expressive medium, large, and extra-large; standard omits them. Both appearances support stop markers, all value-indicator placements, formatting, vertical orientation, RTL, disabled state, limits and step quantization. The standard indicator is compact and remains a top-layer popover. :value-indicator="false" hides only the visual hint.

Standard sizing tokens are --md-slider-track-thickness, --md-slider-thumb-size, and --md-slider-target-size. Existing --md-slider-active-track-color, --md-slider-inactive-track-color, --md-slider-handle-color, and indicator color tokens apply to both appearances. Keep the hit area at least as large as the thumb. Programmatic values remain exact; Slider interactions snap to the step grid. The paired number field is consumer-owned.

Precise numeric input

Opacity

42.125

Migrating the defaults

Add wheel to instances that should retain mouse-wheel value changes.

Set appearance="expressive" per instance, call provideSliderDefaults({ appearance: 'expressive' }) for a subtree, or set sliderDefaults.appearance in M3VuePlugin to retain the previous appearance. For choosing appearance and density together, see Styling.

Reference

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	-
wheelOptional	Enable mouse-wheel value changes. Disabled by default to preserve page scrolling. boolean | undefined	-
wheelStepOptional	The amount the value changes when wheel interaction is enabled. number | undefined	-
lowerLimitOptional	The lower limit for the slider value. number | undefined	-
upperLimitOptional	The upper limit for the slider value. number | undefined	-
appearanceOptional	Visual appearance, independent of size. standardexpressive	-	standardexpressive
sizeOptional	The size of the slider. smalllargeextra-smallmediumextra-large	-	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	-	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]	-

Styling10

Preview

Token	Description
--md-slider-track-thicknessSize Fallback0.25rem	Standard track thickness.
--md-slider-thumb-sizeSize Fallback1rem	Standard thumb diameter; size determines the fallback.
--md-slider-target-sizeSize Fallback2rem	Standard hit area, independent of thumb size.
--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.