toc

Sliders

Sliders let people view and select a value, or a range of values, along a track.

<md-gb-slider aria-label="Volume" value="50" labeled></md-gb-slider>

Install with shadcn/ui: npx shadcn@latest add https://material-web.dev/3.0/r/md-slider.json (setup)

Usage guidelines

Link to “Usage guidelines”

Show the full range. A slider should present every value that can be chosen, with min and max set to match.
Apply the value right away. Use sliders for settings such as volume or brightness, where people see the effect as they drag.
Pick the variant by the value. A standard slider fills from the start, a centered slider fills from the middle, and a range slider selects two values.

Anatomy

Link to “Anatomy”

A slider has a track, a handle, an optional value label and an optional icon.

volume_up

<md-gb-slider aria-label="Volume" value="40" labeled>
  <md-gb-icon slot="icon">volume_up</md-gb-icon>
</md-gb-slider>

Examples

Link to “Examples”

Stops

Link to “Stops”

Set step for a slider that snaps to values, and add ticks to show a stop at each one.

<md-gb-slider aria-label="Brightness" min="0" max="100" step="10" value="50" ticks labeled></md-gb-slider>

Centered

Link to “Centered”

A centered slider starts its active track at the middle of the range, which suits values with a neutral point, such as balance.

<md-gb-slider aria-label="Balance" centered min="-50" max="50" value="0" labeled></md-gb-slider>

Range

Link to “Range”

Set range for two handles. Use value-start and value-end for the chosen values, and label-start and label-end to name the handles.

<md-gb-slider range min="0" max="100" value-start="25" value-end="75" label-start="Minimum price" label-end="Maximum price" labeled></md-gb-slider>

Icon and size

Link to “Icon and size”

Put an icon in the icon slot to show it inside the track. Sizes run from xs (the default) to xl.

volume_up

<md-gb-slider aria-label="Volume" size="lg" value="60" labeled>
  <md-gb-icon slot="icon">volume_up</md-gb-icon>
</md-gb-slider>

Vertical

Link to “Vertical”

Set orientation="vertical" for a vertical slider. Range sliders can't be vertical.

<md-gb-slider aria-label="Brightness" orientation="vertical" value="40" labeled></md-gb-slider>

Disabled

Link to “Disabled”

A disabled slider can't be changed and leaves the focus order.

<md-gb-slider aria-label="Volume" value="30" disabled></md-gb-slider>

Accessibility

Link to “Accessibility”

Name every slider with an aria-label or a visible label. A range slider names each handle with label-start and label-end.
The handle is a slider that exposes its minimum, maximum and value. Set value-label (or value-label-start and value-label-end) when the number alone is unclear: the text is shown on the label and read out, such as "5 minutes".
Arrow keys change the value by one step, Page Up and Page Down by a larger amount, and Home and End jump to the ends.

<md-gb-slider aria-label="Timer" min="1" max="60" value="5" value-label="5 minutes" labeled></md-gb-slider>

Compatibility

Link to “Compatibility”

Material Design 30 uncovered37% tokens

124 of 261 buildable spec units are tested, 0 are excluded with a written reason and 0 are uncovered (the target is 0). 19 of 52 token declarations match the spec (37%), 3 differ on purpose or are being fixed, and 30 have no spec token.

sliders on m3.material.io (opens in a new tab) How compliance is measured

BaselineWidely availableChrome 124Edge 124Firefox 125Safari 17.4

The component’s own CSS and JavaScript rely only on web platform features that are Baseline widely available: it works in Chrome 124, Edge 124, Firefox 125, Safari 17.4 and later.

Newer features it uses where the browser has them (progressive enhancements):

Cursor styles (opens in a new tab) Limited availability degrades safely where it is missing
Forced colors (opens in a new tab) Widely available degrades safely where it is missing

Browser support Learn more about Baseline (opens in a new tab)

WAI-ARIAaxe and ARIA 1.3 passSlider

Roles the component renders: slider (opens in a new tab).

Follows the WAI-ARIA Authoring Practices: Slider (opens in a new tab).

2 rendered states run through axe-core and the WAI-ARIA 1.3 role and attribute rules in a real browser, with no known gaps.

WAI-ARIA 1.3 (opens in a new tab) ARIA Authoring Practices (opens in a new tab) Accessibility

Lighthouse99 · 100 · 100 · 100

Performance
Accessibility
Best practices
SEO

Audits under 90:

Eliminate render-blocking resources
Minify JavaScript
Enable text compression
Network dependency tree
Render blocking requests

Lighthouse 12.8.2 (desktop, 2026-11-08) on the component alone: its first example on a page of its own, without this site's shell. The modules are the development build (not bundled or minified), so the performance score is indicative.

Open the test page About Lighthouse (opens in a new tab)

API reference

Link to “API reference”

<md-gb-slider>

Link to “<md-gb-slider>”

A Material Design slider component.

Properties

Link to “Properties”

Property	Attribute	Type	Default
`ariaLabelEnd`	`label-end`	`string`	`''`
`ariaLabelStart`	`label-start`	`string`	`''`
`ariaValueTextEnd`	`valuetext-end`	`string`	`''`
`ariaValueTextStart`	`valuetext-start`	`string`	`''`
`centered`	`centered`	`boolean`	`false`
`labeled`	`labeled`	`boolean`	`false`
`max`	`max`	`number`	`100`
`min`	`min`	`number`	`0`
`orientation` The orientation of the slider. Vertical orientation applies to standard, discrete, and centered variants (range is not supported in vertical orientation).	`orientation`	`SliderOrientation`	`'horizontal'`
`range`	`range`	`boolean`	`false`
`size`	`size`	`SliderSize`	`'xs'`
`step`	`step`	`number`	"any"
`ticks`	`ticks`	`boolean`	`false`
`value`	`value`	`number`
`valueEnd`	`value-end`	`number`
`valueLabel`	`value-label`	`string`	`''`
`valueLabelEnd`	`value-label-end`	`string`	`''`
`valueLabelStart`	`value-label-start`	`string`	`''`
`valueStart`	`value-start`	`number`

Events

Link to “Events”

Event	Description
`change` Event	Fired when the slider value commit changes from user interaction.
`input` InputEvent	Fired when the slider value changes from user interaction.

Methods

Link to “Methods”

Method	Description
`focus` () => void	MDN Reference

CSS custom properties

Link to “CSS custom properties”

Property	Description
`--active-handle-leading-space`
`--active-track-color`
`--active-track-inner-corner-size`
`--focus-handle-width`
`--handle-color`
`--handle-height`
`--handle-shape`
`--handle-width`
`--icon-color`
`--icon-color-active`
`--icon-size`
`--inactive-track-color`
`--inactive-track-shape-trailing`
`--state-layer-size`
`--stop-indicator-color`
`--stop-indicator-color-selected`
`--stop-indicator-min-spacing`
`--stop-indicator-size`
`--track-height`
`--track-shape`
`--value-indicator-bottom-space`
`--value-indicator-color`
`--value-indicator-label-text-color`
`--value-indicator-width`
`--with-overlap-handle-outline-color`
`--with-overlap-handle-outline-width`