UISlider with certain possible values

Question

I am ready to make this widget:

Only ABC can be selected.

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

Answer 1

Personally, I would use the standard UISlider and add logic to the valueChanged handler, so that as soon as the user drags the slider to an arbitrary point on the scale, the code determines which value is the closest "real" and manually set the value to a real number.

eg. if the user drags the slider to 0.9, the distances to the actual points are from 0.9 (to A), from 0.4 (to B) and from 0.1 (to C). Thus, the code will select C and set the value of slider.value to 1.0. It is impossible to remember if you can animate this property, but you probably can. It would look much nicer for the user.

For visual representations, I will create a container class that contains a UISlider, and a UILabel for each valid value. The ordering of these marks along the scale under the slider in accordance with their position is not too difficult. With appropriate automatic resizing, the control should look correct, regardless of how you change the shape of the container view.

For polishing, I would probably also fine-tune the font for the “selected” label to highlight it or something else, to make it doubly obvious that the element was selected.

Answer 2

I would add UIGestureRecognizers to the “slider image” and animate the “slider button” to the appropriate position if a short click or drag ended in area A, B or C of the slider.