Sliders

Sliders allow users to make selections from a range of values.

Android Web check 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.

Examples of a single point volume slider with a range slider beneath it. The range slider has text fields showing a min value of 20 and a max value of 60.
Top: A continuous slider; Bottom: A discrete slider

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.

A slider with editable numeric values

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.

Continuous slider

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.

Discrete slider

Anatomy

an anatomy diagram of a single point discrete slider with a value indicator displaying 60. The labeled parts 1 through 4 are a track, thumb, value label, and tick mark

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.

Mirroring elements

UIs for languages that are read from right-to-left (RTL), such as Arabic and Hebrew, should be mirrored to ensure content is easy to understand.

Related article arrow_downward

Continuous sliders

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...

Click and drag
This continuous slider is controlled by clicking the thumb and dragging it.
Click jump
This continuous slider is controlled by clicking the track.
Click and arrow
This continuous slider is controlled by clicking the thumb, then using arrow keys to move it.
Tab and arrow
This continuous slider is controlled by using the tab key to select the thumb of the desired slider, then using arrow keys to move it.

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.

a diagram showing the various states of a single-point continuous slider, highlighting the ripple effect differences between hover, focused and pressed
Slider states

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...

Click and drag
This discrete slider is controlled by clicking the thumb and dragging it.
Click jump
This discrete slider is controlled by clicking the track.
Click and arrow
This discrete slider is controlled by clicking the thumb, then using arrow keys to move it.
Tab and arrow
This discrete slider is controlled by using the tab key to select the thumb of the desired slider, then arrow keys to move it.
Tick marks (Optional)
Discrete sliders can use evenly spaced tick marks along the slider track, and the thumb will snap to them. Each tick mark should change the setting in increments that are discernible to the user.
Value entry field (Optional)
Value entry fields become editable after selecting the thumb or entry field. After a text entry is made, the slider position automatically updates to reflect the new value.

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.

diagram showing the various states of a single-point discrete slider, highlighting the ripple effect differences between hover, focused and pressed
Discrete slider states

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.

Crane’s customized sliders
Crane

A travel app that uses Material Design components and Material Theming to create a personalized on-brand experience.

Related link arrow_downward

Color

Crane’s sliders use custom color on three elements: the active track, inactive track, and thumb.

Element Category Attribute Value
Active track, thumb Secondary Color
Opacity		 #E30425
100%
Inactive track Secondary Color
Opacity		 #E30425
38%
The color system

Create a color theme that reflects your brand or style

Related article arrow_downward

Applying color to UI

In a UI, color has a variety of roles: from containing meaning, to expressing a look and feel.

Related article arrow_downward

Specs

Continuous sliders

dimensions specifications for a continuous slider showing 3 measurements
Active track: 6dp height
Inactive track: 4dp height
Thumb radius: 20 dp

Discrete sliders

Active track: 6dp height
Inactive track: 4dp height
Thumb radius: 20dp
Discrete regions of the track: 2dp radius circles

Using sliders

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

Single point sliders

A Slider can be added in a layout like so:

Changes to a slider can be observed like so:

Range slider

Similarly, a RangeSlider can be added in a layout like so:

And in values/arrays.xml:

Changes to a range slider can be observed like so:

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:

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.

"Range slider with range of $0 to $100. Left thumb is set at $20, right thumb at $70."

In code:

Types

There are two types of sliders: 1. Continuous slider, 2. Discrete slider

"Slider examples of both continuous and discrete sliders."

A slider with two thumbs is called a range slider.

Continuous slider

Continuous sliders allow users to make meaningful selections that don’t require a specific value.

API and source code:

The following example shows a continuous slider.

"Continuous sliders with pressed thumb valued at 20."

In the layout:

Continuous range slider

API and source code:

The following example shows a continuous range slider.

"Continuous range slider with left thumb at 20 and right thumb at 70."

In the layout:

Discrete slider

Discrete sliders display a numeric value label upon pressing the thumb, which allows a user to input an exact value.

API and source code:

The following example shows a discrete slider.

"Discrete single point slider with pressed thumb at a value of 20."

In the layout:

Discrete range slider

API and source code:

The following example shows a discrete range slider.

"Discrete range slider with left thumb at 20 and right thumb at 70."

In the layout:

Anatomy and key properties

A slider has a track, one or two thumbs, and optional value label. A discrete slider also has tick marks.

Slider anatomy diagram

  1. Track
  2. Thumb
  3. Value label (optional)
  4. Tick mark (discrete sliders)

Track attributes

ElementAttributeRelated method(s)Default value
Min valueandroid:valueFromsetValueFrom
getValueFrom		N/A
Max valueandroid:valueTosetValueTo
getValueTo		N/A
Step size (discrete)android:stepSizesetStepSize
getStepSize		N/A
Initial selected value (Slider)android:valuesetValue
getValue		N/A
Initial selected values (RangeSlider)app:valuessetValues
getValues		N/A
Heightapp:trackHeightsetTrackHeight
getTrackHeight		4dp
Colorapp:trackColorsetTrackTintList
getTrackTintList		null
Color for track's active partapp:trackColorActivesetTrackActiveTintList
getTrackActiveTintList		?attr/colorPrimary
Color for track's inactive partapp:trackColorInactivesetTrackInactiveTintList
getTrackInactiveTintList		?attr/colorPrimary at 24%
Minimum separation for adjacent thumbsapp:minSeparationsetMinSeparation
getMinSeparation		0dp

Note:app:trackColor takes precedence over app:trackColorActive and app:trackColorInative. It's a shorthand for setting both values to the same thing.

Thumb attributes

ElementAttributeRelated method(s)Default value
Colorapp:thumbColorsetThumbTintList
getThumbTintList		?attr/colorPrimary
Radiusapp:thumbRadiussetThumbRadiusResource
setThumbRadius
getThumbRadius		10dp
Elevationapp:thumbElevationsetThumbElevationResource
setThumbElevation
getThumbElevation		1dp
Halo colorapp:haloColorsetHaloTintList
getHaloTintList		?attr/colorPrimary at 24%
Halo radiusapp:haloRadiussetHaloRadiusResource
setHaloRadius
getHaloRadius		24dp
Stroke colorapp:thumbStrokeColorsetThumbStrokeColor
setThumbStrokeColorResource
getThumbStrokeColor		null
Stroke widthapp:thumbStrokeWidthsetThumbStrokeWidth
setThumbStrokeWidthResource
getThumbStrokeWidth		0dp

Value label attributes

ElementAttributeRelated method(s)Default value
Styleapp:labelStyleN/A@style/Widget.MaterialComponents.Tooltip
FormatterN/AsetLabelFormatter
hasLabelFormatter		null
Behaviorapp:labelBehaviorsetLabelBehavior
getLabelBehavior		floating

Note: The value label is a Tooltip.

Tick mark attributes

ElementAttributeRelated method(s)Default value
Colorapp:tickColorsetTickTintList
getTickTintList		null
Color for track's active partapp:tickColorActivesetTickActiveTintList
getTickActiveTintList		?attr/colorOnPrimary at 54%
Color for track's inactive partapp:tickColorInactivesetTickInactiveTintList
getTickInactiveTintList		?attr/colorPrimary at 54%
Tick visibleapp:tickVisiblesetTickVisible
isTickVisible()		true

Note:app:tickColor takes precedence over app:tickColorActive and app:tickColorInative. It's a shorthand for setting both values to the same thing.

Styles

ElementStyle
Default styleWidget.MaterialComponents.Slider

Default style theme attribute: ?attr/sliderStyle

See the full list of styles and attributes.

Theming sliders

Sliders support Material Theming and can be customized in terms of color and typography.

Slider theming example

API and source code:

The following example shows a range slider with Material Theming.

"Slider theming example with pink and brown colors."

Implementing slider theming

Using theme attributes and styles in res/values/styles.xml (themes all sliders and affects other components):

or using a default style theme attribute, styles and a theme overlay (themes all sliders but does not affect other components):

or using the style in the layout (affects only this specific slider):

No Android implementation guidance available

Using sliders

Installing sliders

Styles

JavaScript instantiation

Note: See Importing the JS component for more information on how to import JavaScript.

Making sliders accessible

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.

Sliders

There are two types of sliders:

  1. Continuous slider
  2. Discrete slider

Continuous slider

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.

Continuous slider with a value of 50

Continuous range slider

Continuous range slider with values of 30 and 70

Discrete slider

Discrete sliders display a numeric value label upon pressing the thumb, which allows a user to select an exact value.

Discrete slider with a value of 50

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.

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.

Discrete slider (with tick marks), with a value of 50

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

Discrete range slider

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

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:

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].

API

Sass mixins

MixinDescription
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.
value-indicator-text-color($color, $opaicty)Sets the color of the value indicator text.

MDCSlider events

Event nameevent.detailDescription
MDCSlider:changeMDCSliderChangeEventDetailEmitted when a value has been changed and committed from a user event. Mirrors the native change event: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
MDCSlider:inputMDCSliderChangeEventDetailEmitted when a value has been changed from a user event. Mirrors the native input event: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event

MDCSlider methods

Method SignatureDescription
getValueStart() => numberGets the value of the start thumb (only applicable for range sliders).
setValueStart(valueStart: number) => voidSets the value of the start thumb (only applicable for range sliders).
getValue() => numberGets the value of the thumb (for single point sliders), or the end thumb (for range sliders).
setValue(value: number) => voidSets the value of the thumb (for single point sliders), or the end thumb (for range sliders).
getDisabled() => booleanGets the disabled state of the slider.
setDisabled(disabled: boolean) => voidSets the disabled state of the slider.
setValueToAriaValueTextFn((mapFn: ((value: number) => string) | null) => voidSets 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.

See MDCSliderAdapter and MDCSliderFoundation for up-to-date code documentation of slider foundation API's.

No Web implementation guidance available

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.

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.

For more guidance on writing labels, go to our page on how to write a good accessibility label.

Types

There are two types of sliders: 1. Continuous 2. Discrete

"Slider examples of both continuous and discrete sliders."

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.

Slider anatomy diagram

  1. Track
  2. Thumb
  3. Value label (optional)
  4. Tick mark (discrete sliders)

Track attributes

 Attribute
Track ShapeWrap your Slider widget with a SliderTheme widget. Use the SliderThemeData widget for the SliderTheme.data parameter with the SliderThemeData.trackShape parameter set.
Range Track ShapeWrap your RangeSlider widget with a SliderTheme widget within the data parameter use the SliderThemeData widget. Within this widget set the rangeTrackShape parameter.
Active Track ColorWrap your Slider widget with a SliderTheme widget within the data parameter use the SliderThemeData widget. Within this widget set the activeTrackColor parameter.
InActive Track ColorWrap your Slider widget with a SliderTheme widget within the data parameter use the SliderThemeData widget. Within this widget set the inactiveTrackColor parameter.
Track HeightWrap 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 ColorWrap 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 ColorWrap 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 ShapeWrap your Slider widget with a SliderTheme widget within the data parameter use the SliderThemeData widget. Within this widget set the thumbShape parameter.
Range Thumb ShapeWrap your RangeSlider widget with a SliderTheme widget within the data parameter use the SliderThemeData widget. Within this widget set the rangeThumbShape parameter.
Thumb ColorWrap your Slider widget with a SliderTheme widget within the data parameter use the SliderThemeData widget. Within this widget set the thumbColor parameter.
Disabled Thumb ColorWrap your Slider widget with a SliderTheme widget within the data parameter use the SliderThemeData widget. Within this widget set the disabledThumbColor parameter.
Minimum Thumb SepartationWrap your Slider widget with a SliderTheme widget within the data parameter use the SliderThemeData widget. Within this widget set the minThumbSeparation parameter.
Thumb SelectorWrap 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 ShapeWrap 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 ColorWrap your RangeSlider widget with a SliderTheme widget within the data parameter use the SliderThemeData widget. Within this widget set the rangeValueIndicatorColor parameter.
Value Indicator ColorWrap 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 StyleWrap 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 ShapeWrap 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 ShapeWrap 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 ShapeWrap 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 ColorWrap 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 ColorWrap 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 ColorWrap your Slider widget with a SliderTheme widget within the data parameter use the SliderThemeData widget. Within this widget set the mi parameter.
Thumb SelectorWrap 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.

Continuous single point slider example

API and source code:

"Continous Slider"

Continuous range slider example

API and source code:

API and source code:

"Range Sliders continuous example"

Discrete sliders

Discrete sliders display a numeric value label upon pressing the thumb, which allows a user to input an exact value.

Discrete single point slider example

API and source code:

"Discrete Sliders example"

Discrete range slider example

API and source code:

"Discrete Range Sliders example"

Theming sliders

Sliders support Material Theming and can be customized in terms of color and typography.

Slider theming example

API and source code:

The following example shows a discrete range slider with Material's Shrine theme.

"Shrine theme example for Slider"
"Shrine theme example for Range Slider"

No Flutter implementation guidance available

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:

Then run the installer:

Then import the Slider target:

Swift

Objective-C

Typical use

MDCSlider can be be used like a standard UIControl.

Swift

Objective C

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

Objective C

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

Objective - C

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.

Types

There are two types of sliders: 1. Continuous slider and 2. Discrete slider

"Slider examples of both continuous and discrete sliders."

A slider with one thumb is called a single point slider, and a slider with two thumbs is called a range slider.

Note: Range sliders are not supported on iOS.

Anatomy and key properties

A slider has a track, one or two thumbs, and optional value label. A discrete slider also has tick marks.

Slider anatomy diagram

  1. Track
  2. Thumb
  3. Value label (optional)
  4. Tick mark (discrete sliders)

Track attributes

 AttributeRelated method(s)Default value
Min valueminimumValue-setMinimumValue:
-minimumValue		0
Max valuemaximumValue-setMaximumValue:
-maximumValue		1
Number of discrete valuesnumberOfDiscreteValues-setNumberOfDiscreteValues:
-numberOfDiscreteValues		N/A
Is discretediscrete-setIsDiscrete:
-isDiscrete		NO
HeighttrackHeight-setTrackHeight:
-trackHeight		2
Track background colorNA-setTrackBackgroundColor:forState:
-trackBackgroundColorForState:		Black at 26% opacity
Track fill colorNA-setTrackFillColor:forState:
-trackFillColorForState:		Primary color

Thumb attributes

 AttributeRelated method(s)Default value
Thumb colorNA-setThumbColor:forState:
-thumbColorForState:		Primary color
RadiusthumbRadius-setThumbRadius:
-thumbRadius		6
ElevationthumbElevation-setThumbElevation:
thumbElevation		0
Ripple colorrippleColor-setRippleColor:
-rippleColor		nil
Ripple radiusthumbRippleMaximumRadius-setThumbRippleMaximumRadius:
-thumbRippleMaximumRadius		0

Value label attributes

 AttributeRelated method(s)Default value
Background colorvalueLabelBackgroundColor-setValueLabelBackgroundColor:
-valueLabelBackgroundColor		Blue
Text colorvalueLabelTextColor-valueLabelTextColor:
valueLabelTextColor		White
FontdiscreteValueLabelFont-setDiscreteValueLabelFont:
-discreteValueLabelFont		N/A

Tick mark attributes

 AttributeRelated method(s)Default value
Background tick colorN/A-setBackgroundTrackTickColor:forState:
-backgroundTrackTickColorForState:		Black
Filled tick colorN/A-setFilledTrackTickColor:forState:
-filledTrackTickColorForState:		Black

Continuous sliders

Continuous sliders allow users to make meaningful selections that don’t require a specific value.

Continuous single point slider example

Source code:

"Continuous slider from 0 to 100, set at a value of 70."

Swift

Objective C

Discrete sliders

Discrete single point slider example

Source code:

"Discrete slider from 0 to 100, set at a value of 70."

Swift

Objective

Theming sliders

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.

No iOS implementation guidance available

Up next

Components

Snackbars

Components

Checkboxes

Components

Buttons