Search code examples
iphoneuislider

Implementing steps/snapping UISlider


I am trying to implement some form of snapping or steps with the UISlider. I have written the following code but it does not work as smooth as I hoped for. It works, but when the I slide it upwards it snap 5points to the right leaving the finger not centered over the "slide-circle"

This is my code where self.lastQuestionSliderValue is a property of the class which I have set to the initial value of the slider.

    if (self.questionSlider.value > self.lastQuestionSliderValue) {
        self.questionSlider.value += 5.0;
    } else {
        self.questionSlider.value -= 5.0;
    }

    self.lastQuestionSliderValue = (int)self.questionSlider.value;

Solution

  • It's actually considerably easier than I first thought. Originally I was trying to get the thumbrect property and do complicated math. Here's what I ended up with:

    h File:

    @property (nonatomic, retain) IBOutlet UISlider* questionSlider;
    @property (nonatomic) float lastQuestionStep;
    @property (nonatomic) float stepValue;
    

    m File:

    - (void)viewDidLoad {
        [super viewDidLoad];
    
        // Set the step to whatever you want. Make sure the step value makes sense
        //   when compared to the min/max values for the slider. You could take this
        //   example a step further and instead use a variable for the number of
        //   steps you wanted.
        self.stepValue = 25.0f;
    
        // Set the initial value to prevent any weird inconsistencies.
        self.lastQuestionStep = (self.questionSlider.value) / self.stepValue;
    }
    
    // This is the "valueChanged" method for the UISlider. Hook this up in
    //   Interface Builder.
    -(IBAction)valueChanged:(id)sender {
        // This determines which "step" the slider should be on. Here we're taking 
        //   the current position of the slider and dividing by the `self.stepValue`
        //   to determine approximately which step we are on. Then we round to get to
        //   find which step we are closest to.
        float newStep = roundf((questionSlider.value) / self.stepValue);
    
        // Convert "steps" back to the context of the sliders values.
        self.questionSlider.value = newStep * self.stepValue;
    }
    

    Make sure you hook up the method and the outlet for your UISlider view and you should be good to go.