Slider

input

Sliders allow users to view and select a value or range along a track. They are ideal for adjusting settings like volume, brightness, or applying filters.

Variants

Continuous

Default

Slider allowing any value within the range

Discrete

Slider with specific step values and optional tick marks

Range

Slider with two handles for selecting a range

Properties

Name Type Required Default Description
value number - - Current slider value (single slider)
valueStart number - - Start value for range slider
valueEnd number - - End value for range slider
min number - - Minimum value
max number - 100 Maximum value
step number - 1 Step increment between values
ticks boolean - - Show tick marks at step intervals
labeled boolean - - Show value label when handle is active
range boolean - - Enable range selection with two handles
disabled boolean - - Whether the slider is disabled
name string - - The HTML name for form submission

States

enabled

Default interactive state

disabled

Non-interactive state

hovered

Mouse hover state

focused

Keyboard focus state

dragging

Handle being dragged

Accessibility

Role: slider
Keyboard Support:
  • ArrowRight/ArrowUp - Increase value by step
  • ArrowLeft/ArrowDown - Decrease value by step
  • Home - Set to minimum value
  • End - Set to maximum value
  • PageUp - Increase by larger amount
  • PageDown - Decrease by larger amount
Screen Reader Notes: Provide aria-label describing what the slider controls. Use aria-valuetext for semantic value descriptions (e.g., 'Medium' instead of '50').

LLM Context

Intent: Allow users to select a value or range within a defined scale
Anti-Patterns:
  • Slider without aria-label
  • Using slider for binary options
  • Slider requiring precise values (use text input)
  • Too many discrete steps without visual feedback
Example Usage: 
<md-slider aria-label="Volume" value="50"></md-slider>
<md-slider aria-label="Steps" ticks step="10" min="0" max="100"></md-slider>
<md-slider aria-label="Price range" range value-start="20" value-end="80"></md-slider>
<md-slider aria-label="Brightness" labeled value="75"></md-slider>