Continuously change value of UILabel on thumb image of UISlider

Question

I have a UISlider(min 1 ,max 10). I want its thumb to have a UILabel placed on top of it that continuously updates and changes its text on moving the UISlider's thumb. So, I grabbed thumb image from the UISlider and added a UILabel to it but the label seems to overwrite itself without erasing the previous value once the thumb is moved.

- (IBAction)SnoozeSliderValueChanged:(id)sender {

    UIImageView *handleView = [_snoozeSlider.subviews lastObject];
    UILabel *label = [[UILabel alloc] initWithFrame:handleView.bounds];
    label.text = [NSString stringWithFormat:@"%0.0f", self.snoozeSlider.value];
    label.backgroundColor = [UIColor clearColor];
    label.textAlignment = NSTextAlignmentCenter;
    [handleView addSubview:label];

}

Initially,

Then, when i start dragging,

I want the label to erase the previous value and show current value as the thumb is moved. Any help is appreciated.Thanks!

Answer 1

Your code continuously adds new subviews. Remove the existing subviews with:

[handleView.subviews makeObjectsPerformSelector:@(removeFromSuperview)];

Alternatively, reuse the existing label. Perhaps using a tag and viewWithTag: to find the existing label and update (or create if not found). Reuse is more efficient than recreation.

Answer 2

    - (IBAction)SnoozeSliderValueChanged:(id)sender {

        //Get the Image View
        UIImageView *handleView = [_snoozeSlider.subviews lastObject];

        // Get the Slider value label
        UILabel *label = (UILabel*)[handleView viewWithTag:1000];

        // If the slider label not exist then create it and add it to the Handleview. So handle view will have only one slider value label, so no more memory issues & not needed to remove from superview.
        // Creation of object is Pain to iOS. So simply reuse it by creating only once.
        // Note that tag setting below, which will helpful to find out that view presents in later case
        if (label==nil) {

            label = [[UILabel alloc] initWithFrame:handleView.bounds];

            label.tag = 1000;

            label.backgroundColor = [UIColor clearColor];

            label.textAlignment = NSTextAlignmentCenter;

            [handleView addSubview:label];


        }

        // Update the slider value
        label.text = [NSString stringWithFormat:@"%0.0f", self.snoozeSlider.value];

    }

Answer 3

This is because, on each slider value changed event, you are creating new UILabel instance and adding this to view. You can just create the UILabel once and on subsequent calls, just update the label frame and label text like below:

UIImageView *handleView = [_snoozeSlider.subviews lastObject];
UILabel *label = (UILabel*)[handleView viewWithTag:10];

if (!label) { //Create new instance

    label = [[UILabel alloc] init];       
    label.backgroundColor = [UIColor clearColor];
    label.textAlignment = NSTextAlignmentCenter;
    label.tag = 10; //Assign a tag so that you can get the instance from parentview next time
    [handleView addSubview:label];
}
[label setFrame:handleView.bounds]; 
label.text = [NSString stringWithFormat:@"%0.0f", self.snoozeSlider.value];

Answer 4

I've created a Swift Class for similar purpose. Its name is MBSliderView
It can be used both in storyboard and from code.

It has 2 display modes for displaying current slider value.
In normal state, it shows value inside thumb like this:

And when thumb is pressed, it displays the current value like this:

From code it can be used like this:

class ViewController: UIViewController {

    var sliderFromCode = MBSliderView()

    override func viewDidLoad() {
        super.viewDidLoad()

        // configure sliderFromCode
        sliderFromCode.frame = CGRect(x: 10, y: 300, width: self.view.frame.size.width - 20, height: 100)
        sliderFromCode.minValue = 0
        sliderFromCode.maxValue = 10
        sliderFromCode.currentValue = 3
        sliderFromCode.step = 1
        sliderFromCode.ignoreDecimals = true   // default value
        sliderFromCode.animateLabel = true      // default value
        sliderFromCode.delegate = self

        self.view.addSubview(sliderFromCode)
    }
}

and in order to receive the slider value, you must implement the MBSliderDelegate. Something like this:

extension ViewController: MBSliderDelegate {
    func sliderView(_ sliderView: MBSliderView, valueDidChange value: Float) {
        print("sliderFromCode: \(value)")
    }
}

Here is the complete sample code.

I know its very to late to answer, but hope this helps you or someone else