Material Design


Open bugs badge

The MDCSlider object is a Material Design control used to select a value from a continuous range or discrete set of values.


Design & API documentation

Table of contents


Installation with CocoaPods

Add the following to your Podfile:

pod 'MaterialComponents/Slider'

Then, run the following command:

pod install


To import the component:


import MaterialComponents.MaterialSlider


#import "MaterialSlider.h"


Typical use

MDCSlider can be be used like a standard UIControl.


override func viewDidLoad() {

  let slider = MDCSlider(frame: CGRect(x: 50, y: 50, width: 100, height: 27))
                   action: #selector(didChangeSliderValue(senderSlider:)),
                   for: .valueChanged)

func didChangeSliderValue(senderSlider:MDCSlider) {
  print("Did change slider value to: %@", senderSlider.value)

Objective C

- (void)viewDidLoad {
  MDCSlider *slider = [[MDCSlider alloc] initWithFrame:CGRectMake(50, 50, 100, 27)];
  [slider addTarget:self
  [self.view addSubview:slider];

- (void)didChangeSliderValue:(MDCSlider *)slider {
  NSLog(@"did change %@ value: %f", NSStringFromClass([slider class]), slider.value);

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.


 let slider = MDCSlider()
 slider.isStatefulAPIEnabled = true

 // Setting a thumb color for selected state.
 slider.setThumbColor(.red, for: .selected)

Objective C

 MDCSlider *slider = [[MDCSlider alloc] init];
 slider.statefulAPIEnabled = YES;
 // Setting a thumb color for selected state.
 [slider setThumbColor:[UIColor redColor] forState:UIControlStateSelected];

Differences from UISlider

Does not have api to:

  • set right and left icons
  • set the thumb image
  • set the right and left track images (for a custom track)
  • set the right (background track) color

Same features:

  • set color for thumb via @c thumbColor
  • set color of track via @c trackColor

New features:

  • making the slider a snap to discrete values via property numberOfDiscreteValues


Our implementation closely resembles what UISlider does but it’s not an exact match. On an accessibilityActivate we move one sixth of the amount between the current value and the midpoint value.


Color Theming

You can theme a slider with your app’s color scheme using the ColorThemer extension.

You must first add the Color Themer extension to your project:

pod 'MaterialComponents/Slider+ColorThemer'


// Step 1: Import the ColorThemer extension
import MaterialComponents.MaterialSlider_ColorThemer

// Step 2: Create or get a color scheme
let colorScheme = MDCSemanticColorScheme()

// Step 3: Apply the color scheme to your component
MDCSliderColorThemer.applySemanticColorScheme(colorScheme, to: component)


// Step 1: Import the ColorThemer extension
#import "MaterialSlider+ColorThemer.h"

// Step 2: Create or get a color scheme
id<MDCColorScheming> colorScheme = [[MDCSemanticColorScheme alloc] initWithDefaults:MDCColorSchemeDefaultsMaterial201804];

// Step 3: Apply the color scheme to your component
[MDCSliderColorThemer applySemanticColorScheme:colorScheme


To help ensure your slider is accessible to as many users as possible, please be sure to review the following recommendations:


Set an appropriate accessibilityLabel value for your slider. This should reflect what the slider affects.


slider.accessibilityLabel = "Volume level"

Objective - C

slider.accessibilityLabel = @"Volume level";

Minimum touch size

Sliders currently respect the minimum touch size recomended by the Google Material spec touch areas should be at least 48 points high and 48 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.