Howto get UISlider to respond to tap events on the track above and below the thumb slider

Question

I have a 284 pixel wide UISlider with a range of 0-25. The user needs to select a value to 1 decimal place (say 12.3), which is possible with care by rolling your finger, but is fiddly and tends to change value as you lift your finger.

I am trying to arrange it so that you can inch the slider up or down by 0.1 intervals by tapping on the slider rail above or below the thumb. I'm sure it's possible, but as this is my first xcode project I'm struggling. Can anyone point me in the right direction?

Answer 1

A couple options come to mind:

1. Create invisible buttons and place them to receive these clicks
2. Subclass UISlider and intercept the touchesBegan, etc methods. Determine if you want to respond to the hit based on its location, or call the super's function. You may need to expand the frame to include where you're touching.

I'm not sure that creating a non standard (especially invisible!) implementation is a great idea, however - I'd recommend you add visible buttons for fine-tuning. A simple up-arrow / down arrow to the side might help. Also consider if a UISlider is what you want at all, given that it doesn't work well enough for you.

Answer 2

A long-standing problem with the iPhone OS' UISlider control is that you can't make it taller. More specifically, you can make it look taller by specifying taller images for its thumb and track, but the touch area stays as a tiny 23px tall.

What you need to do is subclass UISlider, and override pointInside in your class:

// How many extra touchable pixels you want above and below the 23px slider
#define SIZE_EXTENSION_Y 10

- (BOOL) pointInside:(CGPoint)point withEvent:(UIEvent*)event {
    CGRect bounds = self.bounds;
    bounds = CGRectInset(bounds, 0, SIZE_EXTENSION_Y);
    return CGRectContainsPoint(bounds, point);
}

In Interface Builder, set the slider to use your new UISlider subclass, and you now have a slider with a 43px touchable height.