UISlider with uneven steps.

Question

I need to implement a slider control like the below image

Slider will have uneven length steps. Whenever user slides the slider slider will only stop at one of the step which is near to the current range.

But the real challenge is UISlider with dots at custom points (range) which will be provided initially.

Can anyone help me in achieving this functionality.

Answer 1

I think you are best to step away from trying to mangle UISlider into this configuration

If this was my problem I would build a custom view structured like this

 DKCustomSliderView
 -> UIImageView (subview for slider head)

which implements an interface like this.

@interface DKCustomSliderView : UIView

-(void)setStopPoints:(NSArray *)stopPoints; //array of NSNumbers between 0-1 which define indents
-(void)setSliderHeadImage:(UIImage *)sliderHeadImage; //image to use as slider head
-(void)setIndentImage:(UIImage *)indentImage; //image to use as indent marker
-(void)setTrackImage:(UIImage *)trackImage; //stretchy image to use on track 

@end

I would track a pan gesture on the slider image view.

-(void)handlePanGesture:(UIPanGestureRecogniser *)pgr {

if(pgr.state == UIGestureRecogniserStateChanged) { 

   //am i near an indent? , if so lock me here and be slightly sticky.

}
}

and the draw rect for DKCustomSliderView would look a little like this.

-(void)drawRect:(CGRect)dirtyRect {

CGRect bounds = self.bounds;

// 1. draw track across width

for(NSNumber *marker in self.stopPoints) {

//draw a instance of self.indentImage at ([marker floatValue]/bounds.size.width)

}

}