UILabel Over UISlider Thumb

Question

How can i put an UILabel over the thumb of UISlider...so that when i move the thumb....UILabel will also move....as it is on the thumb...

Any idea??

score 30 · Answer 1 · answered Sep 26 '12 at 07:15

30

Try this

yourLabel = [[UILabel alloc]initWithFrame:....];

//Call this method on Slider value change event

-(void)sliderValueChanged{
    CGRect trackRect = [self.slider trackRectForBounds:self.slider.bounds];
    CGRect thumbRect = [self.slider thumbRectForBounds:self.slider.bounds
                               trackRect:trackRect
                                   value:self.slider.value];

    yourLabel.center = CGPointMake(thumbRect.origin.x + self.slider.frame.origin.x,  self.slider.frame.origin.y - 20);
}

I could get most accurate value by using this snippet.

answered Sep 26 '12 at 07:15

girish_vr

3,041
1
24
27

1

+1 It set the moving label on the top of the View. You can adjust lbl.center.y for the custom position.. – HDdeveloper Nov 27 '12 at 18:05
Thanks for your answer, this line has to be: yourLabel.center = CGPointMake(thumbRect.origin.x + self.slider.frame.origin.x + yourLabel.frame.size.width / 2.f, self.slider.frame.origin.y - 20); though – Shady Elyaski Mar 29 '17 at 01:11

Eiko · Accepted Answer · 2010-08-18T10:43:51.980

The "knob" isn't available per public API, so bad chances for hooking it up - if it is a subview at all and not just drawn directly.

So you should add you label to the same view as the slider (make sure you add it later so that appears over it). You can then listen for the value change events and place your label accordingly. It is linear scaling between the endpoints that you need to figure out at first, but it shouldn't be too difficult.

Edit with code:

yourLabel = [[UILabel alloc]initWithFrame:....];
// .. configure label
[[yourSlider superview] addSubview:yourLabel];
[yourSlider addTarget:self action:@selector(adjustLabelForSlider:) forControlEvents:UIControlEventValueChanged];


-(void)adjustLabelForSlider:(id)slider
{
    float value = slider.value;
    float min = slider.minimumValue;
    float max = slider.maximumValue;

    CGFloat newX = ...; // Calculate based on yourSlider.frame and value, min, and max
    CGFloat newY = ...;

    [yourLabel setCenter:CGPointMake(newX,newY)];
}

Note: untested code ;-)

score 1 · Answer 3 · answered Dec 04 '17 at 09:25

Same answer with swift3:

    let trackRect: CGRect  = slider.trackRect(forBounds: slider.bounds)
    let thumbRect: CGRect  = slider.thumbRect(forBounds: slider.bounds , trackRect: trackRect, value: slider.value)
    let x = thumbRect.origin.x + slider.frame.origin.x
    let y = slider.frame.origin.y - 20
    sliderLabel.center = CGPoint(x: x, y: y)

score 1 · Answer 4 · answered Dec 16 '20 at 20:38

extension UIImage {
    class func imageWithLabel(_ label: UILabel) -> UIImage {
        UIGraphicsBeginImageContextWithOptions(label.bounds.size, false, 0)
        defer { UIGraphicsEndImageContext() }
        label.layer.render(in: UIGraphicsGetCurrentContext()!)
        return UIGraphicsGetImageFromCurrentImageContext() ?? UIImage()
    }
}

class ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate, UITextFieldDelegate, UITextViewDelegate, UIPickerViewDelegate, UIPickerViewDataSource, UIScrollViewDelegate
{

    func maskRoundedImage(image: UIImage, radius: CGFloat) -> UIImage {
           let imageView: UIImageView = UIImageView(image: image)
           let layer = imageView.layer
           layer.masksToBounds = true
           layer.cornerRadius = radius
           UIGraphicsBeginImageContext(imageView.bounds.size)
           layer.render(in: UIGraphicsGetCurrentContext()!)
           let roundedImage = UIGraphicsGetImageFromCurrentImageContext()
           UIGraphicsEndImageContext()
           return roundedImage!
    }
    
    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()

            let label = UILabel(frame: CGRect(x: 0, y: 0, width: 28, height: 28))
            label.backgroundColor = .black
            label.textAlignment = .center
            label.font =  label.font.withSize(12)
            label.text = String(Int(round( backlightSlider.value * 100 )))
            label.textColor = .white
            var image = UIImage.imageWithLabel(label)
            image = maskRoundedImage(image: image, radius: 14.0)
            backlightSlider.setThumbImage(image, for: .normal)
}

Thanks for contributing, but next time maybe add a little text. — m123, Dec 16 '20 at 21:54

score 0 · Answer 5 · answered May 31 '16 at 13:38

Just add an imageview on the thumb of slider add a label on imageview

- (IBAction)valueChangedSlider:(id)sender {
handleView = [_slider.subviews lastObject];
label = [[UILabel alloc] initWithFrame:handleView.bounds];
label = (UILabel*)[handleView viewWithTag:1000];

if (label==nil) {

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

    label.tag = 1000;

    [label setFont:[UIFont systemFontOfSize:12]];
    label.textColor = [UIColor redColor];
    label.backgroundColor = [UIColor clearColor];

    label.textAlignment = NSTextAlignmentCenter;

    [handleView addSubview:label];


}
label.text = [NSString stringWithFormat:@"%0.2f", self.slider.value];

}

score 0 · Answer 6 · answered Jun 24 '21 at 12:25

0

If anybody is looking for answer in Swift, please take a look of my answer here:- Put Label over UISlider Thumb

It'll work like a charm :)

answered Jun 24 '21 at 12:25

Vipul Kumar

893
9
19

score -2 · Answer 7 · edited May 23 '17 at 11:53

-2

This could be very helpful... How to get the center of the thumb image of UISlider

edited May 23 '17 at 11:53

Community

1
1

answered Aug 18 '10 at 12:30

Rony

1,229
4
22
42

UILabel Over UISlider Thumb

7 Answers7

Linked

Related