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.
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 controlsdisableOverlapping
- disables the overlaping of thumb controlssendInstantUpdates
- allows the user to select between instant updates and after completing drag of thumb
(void)setMinValue:(CGFloat)minValue maxValue:(CGFloat)maxValue
(void)setLeftValue:(CGFloat)leftValue rightValue:(CGFloat)rightValue
Images are customizable, default ones are used when no image is provided.
trackImage
- track background imagerangeImage
- range background imageleftThumbImage
- left thumb imagerightThumbImage
- right thumb image
- (void)viewDidLoad {
// ...
self.rangeSlider = [[MARKRangeSlider alloc] initWithFrame:CGRectZero];
[self.rangeSlider addTarget:self
action:@selector(rangeSliderValueDidChange:)
forControlEvents:UIControlEventValueChanged];
[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, [email protected]
MARKRangeSlider is available under the MIT license. See the LICENSE file for more info.