A custom reusable slider control with 2 thumbs (range slider).
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
Demo update Podfile for new CocoaPods Jun 13, 2016
Resources Initial commit Mar 8, 2015
Source fix xcode9.4 compile warning Jul 25, 2018
Tests Update tests Dec 26, 2015
.gitignore Initial commit Mar 8, 2015
.travis.yml Initial commit Mar 8, 2015
LICENSE.md Initial commit Mar 8, 2015
MARKRangeSlider.podspec Update MARKRangeSlider.podspec Jan 23, 2017
README.md Update readme Dec 26, 2015



Version License Platform

A custom reusable slider control with 2 thumbs (range slider). Values range is between minimumValue and maximumValue (from 0 to 1 by default). The left thumb isn't able to go on the right side of the right thumb, and vice versa. Control enables multitouch (to use 2 fingers at 2 thumbs at the same time).

Please check Demo project for a basic example on how to use MARKRangeSlider.


Alt text

Available control properties

  • minimumValue - the minimum value of the slider's range (readonly)
  • maximumValue - the maximum value of the slider's range (readonly)
  • leftValue - the value of the left thumb (readonly)
  • rightValue - the value of the right thumb (readonly)
  • minimumDistance - the distance between 2 thumbs (thumbs can't be closer to each other than this distance)
  • pushable - allows the user to push both controls
  • disableOverlapping - disables the overlaping of thumb controls

Available control methods

  • (void)setMinValue:(CGFloat)minValue maxValue:(CGFloat)maxValue
  • (void)setLeftValue:(CGFloat)leftValue rightValue:(CGFloat)rightValue

Available styling properties

Images are customizable, default ones are used when no image is provided.

  • trackImage - track background image
  • rangeImage - range background image
  • leftThumbImage - left thumb image
  • rightThumbImage - right thumb image


In your View Controller

- (void)viewDidLoad {
    // ...
    self.rangeSlider = [[MARKRangeSlider alloc] initWithFrame:CGRectZero];
    [self.rangeSlider addTarget:self

    [self.rangeSlider setMinValue:0.0 maxValue:1.0];
    [self.rangeSlider setLeftValue:0.2 rightValue:0.7];

    self.rangeSlider.minimumDistance = 0.2;

    [self.view addSubview:self.rangeSlider];
    // ...

- (void)rangeSliderValueDidChange:(MARKRangeSlider *)slider {
    NSLog(@"%0.2f - %0.2f", slider.leftValue, slider.rightValue);


MARKRangeSlider is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'MARKRangeSlider'


Vadym Markov, impressionwave@gmail.com


MARKRangeSlider is available under the MIT license. See the LICENSE file for more info.