Material 3 Sliders

Overview

Sliders allow users to select values from a range.

Material 3 Sliders, built with Slider (single-thumb) or RangeSlider (dual-thumb), support Continuous and Discrete variants, adhering to Material Design guidelines. 

This guide covers implementation, accessibility, and theming.

Using Sliders

• Add Material Components for Android library dependency
• Use Slider for single-value or RangeSlider for range selection
• Apply Theme.Material3.* theme for styling

Accessibility

• Set android:contentDescription for TalkBack to announce purpose
• Use android:labelFor on associated value-displaying TextViews
• Ensure 48dp minimum touch target size for thumbs

Behavior and Configuration

• Configure range with valueFrom/valueTo
• Set stepSize for Discrete sliders
• Use LabelFormatter for custom labels
• Handle value changes with listeners

      
val slider = findViewById<Slider>(R.id.slider)
slider.addOnChangeListener { _, value, fromUser ->
    // Handle value change
}
slider.setLabelFormatter { value -> "$${value.toInt()}" }
      
    

Slider Variants

1. Continuous Slider: Smooth value selection
2. Discrete Slider: Fixed steps with tick marks

Continuous Slider

• Allows flexible value selection without fixed steps
• Uses Slider or RangeSlider

Example

      
<com.google.android.material.slider.Slider
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/slider"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:contentDescription="@string/slider_desc"
    android:value="50.0"
    android:valueFrom="0.0"
    android:valueTo="100.0"/>
      
    

      
val slider = findViewById<Slider>(R.id.slider)
slider.addOnChangeListener { _, value, fromUser ->
    // Update UI with value
}
      
    

Discrete Slider

• Restricts selection to specific steps with tick marks
• Uses Slider or RangeSlider

Example

      
<com.google.android.material.slider.RangeSlider
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/range_slider"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:contentDescription="@string/range_slider_desc"
    app:values="@array/initial_slider_values"
    android:valueFrom="0.0"
    android:valueTo="100.0"
    android:stepSize="10.0"/>
      
    

      
<!-- res/values/arrays.xml -->
<resources>
    <array name="initial_slider_values">
        <item>20.0</item>
        <item>80.0</item>
    </array>
</resources>
      
    

      
val rangeSlider = findViewById<RangeSlider>(R.id.range_slider)
rangeSlider.setLabelFormatter { value -> "${value.toInt()}" }
rangeSlider.addOnChangeListener { _, _, _ ->
    // Update UI with rangeSlider.values
}
      
    

Anatomy and Key Properties

Component	Description	Continuous Slider	Discrete Slider
Track	Active/inactive segments, 16dp height	Smooth, no tick marks	Contains tick marks
Thumb	Movable selector, 44dp high	Single or dual thumbs	Snaps to tick marks
Value Label	Displays current value	Optional, floating	Optional, at step points
Tick Marks	Indicates steps	Not present	Visible at step intervals

Attributes and Usage

Element	Attribute	Related Method(s)	Default Value	Usage Description	Component Type
Track	app:trackColorActive	setTrackActiveTintList	?attr/colorPrimary	Sets active track color	All variants
Thumb	app:thumbColor	setThumbTintList	?attr/colorPrimary	Sets thumb color	All variants
Step Size	android:stepSize	setStepSize	N/A (continuous)	Sets discrete step intervals	Discrete
Label Behavior	app:labelBehavior	setLabelBehavior	floating	Controls value label display	All variants

Styles

• Default style: Widget.Material3.Slider
• Default theme attribute: ?attr/sliderStyle

Theming Sliders

• Customize colors and typography
• Use res/values/styles.xml for theming

Example

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="colorPrimary">@color/shrine_pink_100</item>
    <item name="colorOnSurface">@color/shrine_pink_900</item>
</style>
      
    

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="sliderStyle">@style/Widget.App.Slider</item>
</style>
<style name="Widget.App.Slider" parent="Widget.Material3.Slider">
    <item name="thumbColor">@color/shrine_pink_100</item>
    <item name="trackColorActive">@color/shrine_pink_900</item>
</style>
      
    

Material Design Documentation

• Adheres to Material Design guidelines for Sliders
• Covers design, behavior, theming specifications
• Includes structure, variants, accessibility requirements
• Refer to Material Design documentation for full details

FAQ

What are Material 3 Sliders?

• Controls for selecting values from a range

---

How many variants are there?

• Two variants: Continuous and Discrete, as Slider or RangeSlider

---

When to use Discrete Sliders?

• Use for exact value selection with fixed steps

---

How to make them accessible?

• Set contentDescription and labelFor; ensure 48dp thumb size

---

Can I customize appearance?

• Yes, theme via res/values/styles.xml

---

How to add the Material 3 library?

• Include Material Components for Android

---

Are there updates for the latest standards?

• Reflects latest Material 3 standards for sliders