Slider

Sliders enable users to increase or decrease a value by moving the thumb element, which resembles a white dot, along a horizontal track.

Slider screen

How to use sliders

You can use sliders to enable users to adjust and select a specific value in a range. They’re ideal for controlling things like media playback, screen brightness, and settings.
Sliders contain the following elements, which are numbered to correspond to the numbers in the screenshot:
  1. Fill
  2. Buffer (optional)
  3. Progress track
  4. Thumb

Slider how to use

Slider states

Sliders have the following states: normal (with our without thumb), pressed, hovered, and focused.

Slider states

Slider types

Sliders have three distinct types: default, icon, and text.

Slider default
Default

You can display the default slider with or without the thumb. You present optional metadata in three ways:
  • Above right: 
Content duration/content total are concatenated
.
  • Above left and right: 
Left is content duration and right is content total
.
  • Below left and right: 
Left is content duration and right is content total
.

Slider text
Text

You have three text sizes to choose from. Text should be numerical and represent a range, such as 0 to 100 percent.

Slider icon
Icon

You have three icon slider sizes to choose from. You can use your own icon assets or use the default iconography for Alexa.

Radial sliders

Use radial sliders only for the Echo Spot. You can have the radial slider be determinate or indeterminate.

Slider radial
Try it out

See Create and Edit an APL Document.

Related developer documentation