A custom reusable slider control with 2 thumbs (range slider).

Vadym Markov

Last update: Nov 21, 2022

Related tags

Slider MARKRangeSlider

Overview

MARKRangeSlider

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.

Demo

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
sendInstantUpdates - allows the user to select between instant updates and after completing drag of thumb

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

Usage

In your View Controller

- (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);
}

Installation

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

pod 'MARKRangeSlider'

Author

Vadym Markov, [email protected]

License

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

Comments

Make the thumb image view size equal to image size

Problem: even if the thumb image is quite big the image view frame remains 32x32 (as bundle image). Therefore we cannot easily pan the thumb. This PR changes the image view frame sizes. And fixes https://github.com/vadymmarkov/MARKRangeSlider/issues/25 Thanks.

opened by vvit 3
trackImage is nil when using cocoapods + use_frameworks
When specifying use_frameworks! in Podfile, all the resources are located in a separate framework bundle, so [UIImage imageNamed:] returns nil. This can be fixed with 2 ways - fast and the right way =)

replace imageNamed: with imageNamed:inBundle:compatibleWithTraitCollection: (works only ios8+)

create a separate resource bundle with images and reference it in code
opened by Sega-Zero 3

Do not set left value

If i set left value first and then right, left value will still be not set. Code below works but if i set left value first it will be 1

_ageSlider.minimumValue = 14.0;
_ageSlider.maximumValue = 99.0;
_ageSlider.rightValue = 28.0;
_ageSlider.leftValue = 18.0;
_ageSlider.minimumDistance = 1.0;

[_ageSlider addTarget:self
               action:@selector(rangeSliderValueDidChange:)
     forControlEvents:UIControlEventValueChanged];

[self updateRangeText];

opened by andwhy 3

UITableViewCell subView MARKRangeSlider issue

Hi whenever, we are dragging, the table view controller is popping up to previous view controller so how could we handle such scenario? I mean how to stop from popping back to previous view controller?

opened by SyedHyder1988 2
Left value always starts from 0

I installed Mark Range Slider and in it I gave the slider.minimumValue = 15 and leftValue as 20. But when i started scrolling it showed the left value to be 0 which was quite surprising. I noticed that for each and every minimum value the code returns the starting value from 0. I tried a lot to understand and fix the issue but it didn't work. I have implemented this party and willing to continue this . Please fix this issue as soon as possible because I can not afford to be late regarding this issue.

opened by kunalgupta1593 2
Weird handle under the left handle

Works great except for a strange thing (see below). There's a second handle under the left most handle. Not doing anything special - just copied and pasted code from github to init the slider.

opened by etayluz 2
Pushable thumb controls and disabling overlapping

I had some use cases for pushable controls and disabling overlapping of the thumb controls, thought you might want to merge them in. Pushing: Overlapping:

opened by Arrnas 2
Source files seem to conflict with the license

The license.md file in the repo states that the code is under MIT license but the actual source files contain "Copyright (c) 2015 Vadym Markov. All rights reserved.".

The latter is probably the XCode default?

opened by mkoppanen 2
trackImage

Hello,

how does one actually change the track or range image?

It seems that the image set during setUpViewComponents and changing the "trackImage" property doesn't change the image currently being used in trackImageView.

opened by mkoppanen 2
fix that the slider shows the right thumb's position incorrectly, whe…

fix that the slider shows the right thumb's position incorrectly, when the left value & right value is zero

*precondition : the slider's left value is not zero.

opened by Urtaq 1
Dragging thumb for custom image only works for top half

If I use a custom Thumb image, tapping and dragging the thumb only works if the tap started from the middle to the top of the thumb. If you tap at the bottom of the thumb, it doesn't work.

Video: https://youtu.be/M9O1J0AIm3Q

opened by gmogames 1
Add stepping value

Hi there,

It would be nice if you could define the stepping value. so if for instance the steppingValue is 1, then the slider would go 10, 11, 12, etc... instead of 10.1, 10.2, etc...

Or if the stepping value is 10, then it goes 10, 20, 30, etc...

Otherwise, great slider!

opened by gmogames 2

Releases(1.1.1)

1.1.1(Jan 23, 2017)

Thanks @vvit and @jegumhon
Source code(tar.gz)
Source code(zip)
1.1.0(May 9, 2016)

Load images from custom bundle on iOS 7 https://github.com/vadymmarkov/MARKRangeSlider/pull/28 Thanks @ikovalisko
Source code(tar.gz)
Source code(zip)
1.0.1(Jan 28, 2016)
Exposes read-only properties of left/right thumb views https://github.com/vadymmarkov/MARKRangeSlider/pull/22, thanks @ashfurrow

Source code(tar.gz)
Source code(zip)
1.0.0(Dec 26, 2015)
Fix double initialisation.

Use image height as track height.

Drop hardcoded image insets.

Calculate intrinsicContentSize.

New way of setting minimum/maximum and left/right values.

Load images from a bundle.

Source code(tar.gz)
Source code(zip)
0.2.0(May 11, 2015)
Possibility to have pushable controls.

Disabling overlapping of the thumb controls.

Big thanks to @Arrnas for contribution.
Source code(tar.gz)
Source code(zip)