UISlider with certain possible values

Question

I am willing to do this widget:

Just A-B-C can be chosen.

Any idea if someone already did something similar? If not, how would you do it?

Answer 1

I would add UIGestureRecognizers to the "slider image" and animate the "slider button" to the corresponding position if the tap or drag ended within A,B or C's area of the slider..

Answer 2

Personally I'd use a standard UISlider and add logic to the valueChanged handler, so that once the user has dragged the slider to an arbitrary point on the scale, the code determines which is the nearest 'valid' value, and would manually set the value to a valid number.

E.g. if the user drags the slider to 0.9, the distances to valid points are 0.9 (to A), 0.4 (to B) and 0.1 (to C). So the code would pick C, and set slider.value to 1.0. Can't remember off-hand if you could animate that property, but you probably can. That would look much nicer to the user.

For visuals, I'd create a container class that holds a UISlider, and a UILabel for each valid value. Arranging those labels along the scale underneath the slider according to their positions isn't too hard. With suitable auto-resizing, the control should still look correct no matter how you change the shape of the container view.

For polish, I'd probably also tweak the font for the 'selected' label to bold it or something else to make it doubly obvious that the item has been selected.