Sliders allow users to make selections from a range of values.
Android check Web Flutter iOS
Usage
Sliders allow users to view and select a value (or range) from the range along a bar. They’re ideal for adjusting settings such as volume and brightness, or for applying image filters.
Sliders can use icons on both ends of the bar to represent a numeric or relative scale. The range of values or the nature of the values, such as volume change, can be communicated with icons.
Immediate effects
Changes made with sliders are immediate, allowing the user to make slider adjustments while determining a selection. Sliders shouldn’t be used to adjust settings with any delay in providing user feedback.
Current state
Sliders reflect the current state of the settings they control.
Principles
Adjustable
Sliders should be used for making selections from a range of values.
Immediate
When interacting with a slider, changes should be reflected back to a user immediately.
Accessible
Sliders should present the full range of choices that are available to a user.
Values
Editable numeric values allow users to set the exact value of a slider. Upon pressing the thumb or the value indicator field, the value indicator...
Editable numeric values
Editable numeric values allow users to set the exact value of a slider.
Upon pressing the slider thumb or the value indicator text field, the input becomes editable for text entry. Upon entry, the thumb position is updated immediately to match any change in value. Note that editable values are not part of the component’s default behavior, but is a feature you can develop. Our usability research supports that this feature can make sliders easier to use in some cases.
Order of values
For languages that are displayed from left-to-right, such as English, the smallest value for the range appears on the left and the largest value appears on the right.
For right-to-left languages, like Arabic, the value position should be reversed, placing the largest value on the left, and the smallest on the right.
Types
Continuous sliders allow users to select a value along a subjective range. Discrete sliders can be adjusted to a specific value by referencing its value...
Continuous sliders
Continuous sliders allow users to set and select a value along a subjective range.
Discrete sliders
Discrete sliders can be adjusted to a specific value by referencing its value indicator.
Allowed selections may be organized and indicated with tick marks that a slider thumb will snap to.
Anatomy
A slider can contain the following elements:
1. Track The track shows the range that is available for a user to select from. For left-to-right (LTR) languages, the smallest value appears on the far left end of the track and the largest value is on the far right. For right-to-left (RTL) languages this orientation is reversed.
2. Thumb The thumb is a position indicator that can be moved along the track, displaying the selected value of its position.
3. Value label (optional) A value label displays the specific numeric value that corresponds with the thumb’s placement.
4. Tick mark (optional) Tick marks along a track represent predetermined values that the user can move the slider to.
Continuous sliders allow users to make selections that don’t require a specific value.
Behavior
This continuous slider is controlled by clicking the thumb and dragging it. This continuous slider is controlled by clicking the track. This continuous slider is...
States
Continuous sliders have normal, focused, click, and disabled states. Slider states
Continuous sliders reflect state changes through the thumb ripple. When disabled, both the thumb and track change to reflect the state.
Discrete sliders
Discrete sliders display a numeric value label upon pressing the thumb, allowing users to input an exact value.
Behavior
This discrete slider is controlled by clicking the thumb and dragging it. This discrete slider is controlled by clicking the track. This discrete slider is...
States
Discrete sliders have normal, focused, click, and disabled states. Discrete slider states
Discrete sliders reflect state changes through the thumb ripple. When disabled, both the thumb and track change to reflect the state.
Theming
This travel app’s sliders were customized using Material Theming. One area of customization includes color. Crane is a travel app that uses Material Design...
Crane Material Theme
This travel app’s sliders have been customized using Material Theming. One area of customization includes color.
Before you can use Material sliders, you need to add a dependency to the
Material Components for Android library. For more information, go to the
Getting started
page.
Usage
A Slider can be added in a layout like so:
xxxxxxxxxx
Changes to a slider can be observed like so:
xxxxxxxxxx
Similarly, a RangeSlider can be added in a layout like so:
xxxxxxxxxx
And in values/arrays.xml:
xxxxxxxxxx
Changes to a range slider can be observed like so:
xxxxxxxxxx
Making sliders accessible
Sliders support setting content descriptors for use with screen readers. While
optional, we strongly encourage their use.
That can be done in XML via the android:contentDescription attribute or
programmatically like so:
xxxxxxxxxx
Additionaly, if using a TextView to display the value of the slider, you
should set android:labelFor on it, so that screen readers announce that
TextView refers to the slider.
Adding/removing the value label
By default, the slider will show a value label above the thumb when it's
selected. You can change how it's drawn via the app:labelBehavior attribute or
setLabelBehavior method.
The modes of app:labelBehavior are:
floating (default) - draws the label floating above the bounds of this
view
withinBounds - draws the label floating within the bounds of this view
gone - prevents the label from being drawn
Setting a LabelFormatter
By using a LabelFormatter you can display the selected value using letters to
indicate magnitude (e.g.: 1.5K, 3M, 12B). That can be achieved through the
setLabelFormatter method.
The following example shows a slider for a price range in the USD currency.
Sliders are backed by an <input> element, meaning that they are fully
accessible. Unlike the ARIA-based slider,
MDC sliders are adjustable using touch-based assistive technologies such as
TalkBack on Android.
Per the spec, ensure that the following attributes are added to the
input element(s):
value: Value representing the current value.
min: Value representing the minimum allowed value.
max: Value representing the maximum allowed value.
aria-label or aria-labelledby: Accessible label for the slider.
If the value is not user-friendly (e.g. a number to
represent the day of the week), also set the following:
aria-valuetext: Set this input attribute to a string that makes the slider
value understandable, e.g. 'Monday'.
Add a function to map the slider value to aria-valuetext via the
MDCSlider#setValueToAriaValueTextFn method.
Continuous sliders allow users to make meaningful selections that don’t require
a specific value.
Note: The step size for value quantization is, by default, 1. To specify
a custom step size, provide a value for the step attribute on the input
element.
xxxxxxxxxx
Continuous range slider
xxxxxxxxxx
Discrete slider
Discrete sliders display a numeric value label upon pressing the thumb, which
allows a user to select an exact value.
To create a discrete slider, add the following:
mdc-slider--discrete class on the root element.
Value indicator element (mdc-slider__value-indicator-container), as shown
below.
xxxxxxxxxx
Discrete slider with tick marks
Discrete sliders can optionally display tick marks. Tick marks represent
predetermined values to which the user can move the slider.
To add tick marks to a discrete slider, add the following:
mdc-slider--tick-marks class on the root element
mdc-slider__tick-marks element as a child of the mdc-slider__track
element
mdc-slider__tick-mark--active and mdc-slider__tick-mark--inactive
elements as children of the mdc-slider__tick-marks element
xxxxxxxxxx
Discrete range slider
xxxxxxxxxx
Other variants
Disabled slider
To disable a slider, add the following:
mdc-slider--disabled class on the root element
disabled attribute on the input element
xxxxxxxxxx
Additional information
Initialization with custom ranges and values
When MDCSlider is initialized, it reads the input element's min,
max, and value attributes if present, using them to set
the component's internal min, max, and value properties.
Use these attributes to initialize the slider with a custom range and values,
as shown below:
xxxxxxxxxx
Setting slider position before component initialization
When MDCSlider is initialized, it updates the slider track and thumb
positions based on the internal value(s). To set the correct track and thumb
positions before component initialization, mark up the DOM as follows:
Calculate rangePercentDecimal, the active track range as a percentage of
the entire track, i.e. (valueEnd - valueStart) / (max - min).
Set transform:scaleX(<rangePercentDecimal>) as an inline style on the
mdc-slider__track--active_fill element.
Calculate thumbEndPercent, the initial position of the end thumb as a
percentage of the entire track. Set left:calc(<thumbEndPercent>% - 24px)
as an inline style on the end thumb (mdc-slider__thumb) element
(or right for RTL layouts).
[Range sliders only] Calculate thumbStartPercent, the initial position
of the start thumb as a percentage of the entire track. Set
left:calc(<thumbStartPercent>% - 24px) as an inline style on the
start thumb (mdc-slider__thumb) element (or right for RTL layouts).
[Range sliders only] Using the previously calculated thumbStartPercent,
set left:<thumbStartPercent>% as an inline style on the
mdc-slider__track--active_fill element (or right for RTL layouts).
Additionally, the MDCSlider component should be initialized with
skipInitialUIUpdate set to true.
Range slider example
This is an example of a range slider with internal values of
[min, max] = [0, 100] and [start, end] = [30, 70].
xxxxxxxxxx
API
Sass mixins
Mixin
Description
track-active-color($color)
Sets the color of the active track.
track-inactive-color($color, $opacity)
Sets the color and opacity of the inactive track.
thumb-color($color)
Sets the color of the thumb.
thumb-ripple-color($color)
Sets the color of the thumb ripple.
tick-mark-active-color($color)
Sets the color of tick marks on the active track.
tick-mark-inactive-color($color)
Sets the color of tick marks on the inactive track.
value-indicator-color($color, $opaicty)
Sets the color and opacity of the value indicator.
Sets a function that maps the slider value to value of the aria-valuetext attribute on the thumb element. If not set, the aria-valuetext attribute is unchanged when the value changes.
Usage within frameworks
If you are using a JavaScript framework such as React or Angular, you can create a slider for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.
Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.
Sliders can have icons on both ends of the bar that reflect a range of values.
Making sliders accessible
Flutter's APIs support accessibility setting for large fonts, screen readers, and sufficient contrast. For more information, go to Flutter's accessibility and internationalization pages.
A slider with one thumb is called a single point slider, and a slider with two thumbs is called a range slider.
Anatomy and key properties
A slider has a track, one or two thumbs, and optional value label. A discrete slider also has tick marks.
Track
Thumb
Value label (optional)
Tick mark (discrete sliders)
Track attributes
Attribute
Track Shape
Wrap your Slider widget with a SliderTheme widget. Use the SliderThemeData widget for the SliderTheme.data parameter with the SliderThemeData.trackShape parameter set.
Range Track Shape
Wrap your RangeSlider widget with a SliderTheme widget within the data parameter use the SliderThemeData widget. Within this widget set the rangeTrackShape parameter.
Active Track Color
Wrap your Slider widget with a SliderTheme widget within the data parameter use the SliderThemeData widget. Within this widget set the activeTrackColor parameter.
InActive Track Color
Wrap your Slider widget with a SliderTheme widget within the data parameter use the SliderThemeData widget. Within this widget set the inactiveTrackColor parameter.
Track Height
Wrap your Slider widget with a SliderTheme widget within the data parameter use the SliderThemeData widget. Within this widget set the trackHeight parameter.
Disabled Active Track Color
Wrap your Slider widget with a SliderTheme widget within the data parameter use the SliderThemeData widget. Within this widget set the disabledActiveTrackColor parameter.
Disabled InActive Track Color
Wrap your Slider widget with a SliderTheme widget within the data parameter use the SliderThemeData widget. Within this widget set the disabledInactiveTrackColor parameter.
Thumb attributes
Attribute
Thumb Shape
Wrap your Slider widget with a SliderTheme widget within the data parameter use the SliderThemeData widget. Within this widget set the thumbShape parameter.
Range Thumb Shape
Wrap your RangeSlider widget with a SliderTheme widget within the data parameter use the SliderThemeData widget. Within this widget set the rangeThumbShape parameter.
Thumb Color
Wrap your Slider widget with a SliderTheme widget within the data parameter use the SliderThemeData widget. Within this widget set the thumbColor parameter.
Disabled Thumb Color
Wrap your Slider widget with a SliderTheme widget within the data parameter use the SliderThemeData widget. Within this widget set the disabledThumbColor parameter.
Minimum Thumb Separtation
Wrap your Slider widget with a SliderTheme widget within the data parameter use the SliderThemeData widget. Within this widget set the minThumbSeparation parameter.
Thumb Selector
Wrap your Slider widget with a SliderTheme widget within the data parameter use the SliderThemeData widget. Within this widget set the thumbSelector parameter.
Value label attributes
Attribute
Value Indicator Shape
Wrap your Slider widget with a SliderTheme widget within the data parameter use the SliderThemeData widget. Within this widget set the valueIndicatorShape parameter.
Range Value Indicator Color
Wrap your RangeSlider widget with a SliderTheme widget within the data parameter use the SliderThemeData widget. Within this widget set the rangeValueIndicatorColor parameter.
Value Indicator Color
Wrap your Slider widget with a SliderTheme widget within the data parameter use the SliderThemeData widget. Within this widget set the valueIndicatorColor parameter.
Value Indicator Text Style
Wrap your Slider widget with a SliderTheme widget within the data parameter use the SliderThemeData widget. Within this widget set the valueIndicatorTextStyle parameter.
Show Value Indicator Shape
Wrap your Slider widget with a SliderTheme widget within the data parameter use the SliderThemeData widget. Within this widget set the showValueIndicatorShape parameter.
Tick mark attributes
Attribute
Tick Mark Shape
Wrap your Slider widget with a SliderTheme widget within the data parameter use the SliderThemeData widget. Within this widget set the tickMarkShape parameter.
Range Tick Mark Shape
Wrap your RangeSlider widget with a SliderTheme widget within the data parameter use the SliderThemeData widget. Within this widget set the rangeTickMarkShape parameter.
Active Tick Mark Color
Wrap your Slider widget with a SliderTheme widget within the data parameter use the SliderThemeData widget. Within this widget set the activeTickMarkColor parameter.
Inactive Tick Mark Color
Wrap your Slider widget with a SliderTheme widget within the data parameter use the SliderThemeData widget. Within this widget set the inactiveTickMarkColor parameter.
Disabled Active Tick Mark Color
Wrap your Slider widget with a SliderTheme widget within the data parameter use the SliderThemeData widget. Within this widget set the mi parameter.
Thumb Selector
Wrap your Slider widget with a SliderTheme widget within the data parameter use the SliderThemeData widget. Within this widget set the thumbSelector parameter.
Continuous sliders
Continuous sliders allow users to make meaningful selections that don’t require
a specific value.
The following example shows a discrete range slider with Material's Shrine theme.
xxxxxxxxxx
No Flutter implementation guidance available
On July 15, 2021, Material's iOS libraries will enter maintenance mode. Learn more.
Using sliders
Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.
Installing sliders
In order to install with Cocoapods first add the component to your Podfile:
xxxxxxxxxx
Then run the installer:
xxxxxxxxxx
Then import the Slider target:
Swift
xxxxxxxxxx
Objective-C
xxxxxxxxxx
Typical use
MDCSlider can be be used like a standard UIControl.
Swift
xxxxxxxxxx
Objective C
xxxxxxxxxx
Stateful APIs
MDCSlider exposes stateful APIs to customize the colors for different control states. In order to use this API you must enable statefulAPIEnabled on your MDCSlider instances.
Swift
xxxxxxxxxx
Objective C
xxxxxxxxxx
Making sliders accessible
To help ensure your slider is accessible to as many users as possible, please be sure to review the following recommendations:
-accessibilityLabel
Set an appropriate accessibilityLabel value for your slider. This should reflect what the slider affects.
Swift
xxxxxxxxxx
Objective - C
xxxxxxxxxx
Minimum touch size
Sliders currently respect the minimum touch size recomended by the Material spec touch areas should be at least 44 points high and 44 wide. The height of the slider is set to 27 points so make sure there is sufficient space so that touches don't affect other elements.
MDCSlider has no recommended theming mechanism. Configure colors using the properties and stateful APIs exposed on the slider.
Differences from UISlider
UISlider APIs not present in MDCSlider
Setting the left/right icons via minimumValueImage and maximumValueImage.
Setting the thumb image via setThumbImage:forState:.
Setting the right/left track images (for a custom track) via setMinimumTrackImage:forState: and setMaximumTrackImage:forState:.
UISlider APIs with different names in MDCSlider
The UISlider API minimumTrackTintColor has an equivalent API setTrackFillColor:forState: in MDCSlider. This API must first be enabled by setting statefulAPIEnabled to YES.
The UISlider API maximumTrackTintColor has an equivalent API setTrackBackgroundColor:forState: in MDCSlider. This API must first be enabled by setting statefulAPIEnabled = YES.
The UISlider API thumbTintColor has an equivalent API setThumbColor:forState: in MDCSlider. This API must first be enabled by setting statefulAPIEnabled = YES.
MDCSlider enhancements not in MDCSlider
MDCSlider can behave as a Material Discrete Slider by setting discrete = YES and numberOfDiscreteValues to a value greater than or equal to 2. Discrete sliders only allow their calculated discrete values to be selected as the Slider's value. If numberOfDiscreteValues is less than 2, then the Slider will behave as a Material Continuous Slider.
For Discrete Sliders, the track tick color is configured with the setFilledTrackTickColor:forState: and setBackgroundTrackTickColor:forState: APIs. The filled track ticks are those overlapping the filled/active part of the Slider. The background track ticks are found in any other portions of the track. These APIs must first be enabled by setting statefulAPIEnabled = YES.
Track tick marks can be made shown always, never, or only when dragging via the trackTickVisibility API. If numberOfDiscreteValues is less than 2, then tick marks will never be shown.
An anchor point can be set via filledTrackAnchorValue to control the starting position of the filled track.
The track can be made taller (or shorter) by setting the value of trackHeight.
-accessibilityActivate
MDCSlider's behavior is very similar to that of UISlider, but it's not exactly the same. On an
accessibilityActivate event, the value moves one sixth of the amount between the current value and the midpoint value.