Material Design

Slider

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.

Slider

Design & API documentation

Table of contents


Installation

Installation with CocoaPods

Add the following to your Podfile:

pod 'MaterialComponents/Slider'

Then, run the following command:

pod install

Importing

To import the component:

Swift

import MaterialComponents.MaterialSlider

Objective-C

#import "MaterialSlider.h"

Usage

Typical use

MDCSlider can be be used like a standard UIControl.

Swift

override func viewDidLoad() {
  super.viewDidLoad()

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

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
                action:@selector(didChangeSliderValue:)
      forControlEvents:UIControlEventValueChanged];
  [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.

Swift

 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

UISlider APIs not present in MDCSlider

MDCSlider does not support the following UISlider APIs:

  • 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 = 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
      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](https://material.io/components/sliders/#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. ## Extensions ### 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: ```bash pod 'MaterialComponents/Slider+ColorThemer' ```

    Swift

    // 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)
    

    Objective-C

    // 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
         toslider:component];
    
    ## Accessibility 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 ```swift slider.accessibilityLabel = "Volume level" ``` #### Objective - C ```objc slider.accessibilityLabel = @"Volume level"; ``` ### Minimum touch size Sliders currently respect the minimum touch size recomended by the Material spec [touch areas should be at least 48 points high and 48 wide](https://material.io/design/layout/spacing-methods.html#touch-click-targets). 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.