15

I want to add a label to the slider's thumb which should show the value of the slider and changes too when thumbs is being dragged towards right side. Is it possible??

Any comments or suggestion would be appreciated.

8 Answers 8

16

I grab the thumb image from the slider (UIImageView) and add my label to it. Nice and clean.

UIImageView *handleView = [slider.subviews lastObject];
UILabel *label = [[UILabel alloc] initWithFrame:handleView.bounds];
label.backgroundColor = [UIColor clearColor];
label.textAlignment = NSTextAlignmentCenter;
[handleView addSubview:label];
self.sliderLabel = label;

Then you change the label.text whenever you need to.

Note: the subview order of UISlider could change in the future, however it's unlikely that the thumb would no longer be the topmost view, as it will always be the main point of interaction in a slider.

Swift 3 -- More detailed example (link your slider in IB)

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var slider: UISlider!
    var sliderLabel: UILabel?

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        if let handleView = slider.subviews.last as? UIImageView {
            let label = UILabel(frame: handleView.bounds)
            label.backgroundColor = .clear
            label.textAlignment = .center
            handleView.addSubview(label)

            self.sliderLabel = label
            //set label font, size, color, etc.
            label.text = "!!"
        }
    }
}
9
  • 3
    How to do this in swift?
    – B B
    Feb 20, 2015 at 11:16
  • Two Questions. 1. Where are you putting this code, ViewDidLoad or in the sliderLabel Function? 2. What is the SliderLabel? May 4, 2017 at 17:54
  • @bradfordgray You have to have a reference to your slider: 'slider', and your own property that you will use to later reference the label you are creating and adding to the slider: 'sliderLabel'. You can do this in viewDidLoad, but both of those properties should be defined at the top of your viewController (or whatever file you're in).
    – Matjan
    May 9, 2017 at 14:39
  • So for clarities sake @IBOutlet weak var slider: UISlider!, and make sliderLabel a double. But if you do that, you can't assign a double to a label in that order. I'm slightly confused as to how you are doing this. Thank's for your help. May 10, 2017 at 14:52
  • 1
    lastly I don't quite understand, but when I do a breakpoint, slider.subview.last as? UIImageView it is never true. May 10, 2017 at 15:00
13

You could do something similar to this example which draws text directly to your thumb image. It's a rough example so you will need to change it to make sense for your project.

- (IBAction)sliderValueChanged:(id)sender {
    UISlider *aSlider = (UISlider *)sender;
    NSString *strForThumbImage = 
     [NSString stringWithFormat:@"%.0f", aSlider.value * 100]
    UIImage *thumbImage = [self addText:self.thumbImage 
                                   text:strForThumbImage];
    [aSlider setThumbImage:thumbImage forState:aSlider.state];
}

//Add text to UIImage 
-(UIImage *)addText:(UIImage *)img text:(NSString *)text1{ 
    int w = img.size.width; 
    int h = img.size.height; 
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); 
    CGContextRef context = CGBitmapContextCreate( NULL, 
                                                  w, 
                                                  h, 
                                                  8, 
                                                  4 * w, 
                                                  colorSpace, 
                                                  kCGImageAlphaPremultipliedFirst); 
    CGContextDrawImage(context, CGRectMake(0, 0, w, h), img.CGImage); 

    char* text= (char *)[text1 cStringUsingEncoding:NSASCIIStringEncoding]; 
    CGContextSelectFont(context, "Arial",12, kCGEncodingMacRoman); 
    CGContextSetTextDrawingMode(context, kCGTextFill); 
    CGContextSetRGBFillColor(context, 0, 0, 0, 1); 
    CGContextShowTextAtPoint(context,3,8,text, strlen(text)); 
    CGImageRef imgCombined = CGBitmapContextCreateImage(context); 

    CGContextRelease(context); 
    CGColorSpaceRelease(colorSpace); 

    UIImage *retImage = [UIImage imageWithCGImage:imgCombined]; 
    CGImageRelease(imgCombined); 

    return retImage; 
}
8
  • It give me an error saying, request for member thumbImage in something not a structure or union.
    – Ashutosh
    May 18, 2011 at 18:39
  • I fixed the error but still its showing the text below the slider and is not aligned too. Could you give some more hints
    – Ashutosh
    May 18, 2011 at 18:47
  • Change the CGContextShowTextAtPoint() function to adjust where the text is drawn.
    – jaminguy
    May 18, 2011 at 19:30
  • I got it to change the color of the text you got to use CGContextSetRGBFillColor(context,255,255,255, 1);
    – Ashutosh
    May 18, 2011 at 21:00
  • I think this design may be a better way to go. cocoacontrols.com/platforms/ios/controls/elcslider
    – jaminguy
    May 21, 2011 at 0:31
13

A simple implementation of a custom class in Swift 3.2. This is working nicely for me.

class ThumbTextSlider: UISlider {
var thumbTextLabel: UILabel = UILabel()

private var thumbFrame: CGRect {
    return thumbRect(forBounds: bounds, trackRect: trackRect(forBounds: bounds), value: value)
}

override func layoutSubviews() {
    super.layoutSubviews()

    thumbTextLabel.frame = thumbFrame
    thumbTextLabel.text = Double(value).roundTo(places: 1).description
}

override func awakeFromNib() {
    super.awakeFromNib()
    addSubview(thumbTextLabel)
    thumbTextLabel.textAlignment = .center
    thumbTextLabel.layer.zPosition = layer.zPosition + 1
}
}

I hope it helps :)

2
  • 1
    Superb! Works great
    – Roi Mulia
    Feb 16, 2018 at 16:41
  • 1
    you are champ Bro :) Oct 14, 2018 at 12:43
4

Add a UISlider and a UILabel in Interface Builder. Create IBOutlets to access them in code and add a IBAction to respond to changes of the slider value.

Then in your code write:

- (void)viewDidLoad
{
    [super viewDidLoad];

    [self.slider addSubview:self.label];
    [self valueChanged:self.slider];
}

- (IBAction)valueChanged:(id)sender {
    self.label.center = CGPointMake(self.slider.value*self.slider.bounds.size.width, 40);
    self.label.text = [NSString stringWithFormat:@"%0.2f", self.slider.value];
}

EDIT: To create the slider and label with code add this:

-(void)loadView {
    [super loadView];
    self.slider = [[[UISlider alloc] initWithFrame:CGRectMake(50, 150, 200, 30)] autorelease];
    self.label = [[[UILabel alloc] initWithFrame:CGRectMake(0, 0, 50, 30)] autorelease];
    [self.label setBackgroundColor:[UIColor clearColor]];
    [self.slider addTarget:self action:@selector(valueChanged:) forControlEvents:UIControlEventValueChanged];
    [self.view addSubview:self.slider];

}
9
  • The only problem with this approach would be that the label won't move until the user has finished moving the slider. May 18, 2011 at 16:41
  • Deepak, I believe that if the slider's continuous property is set to YES, that it updates as the values are changed and not just when the change is completed. May 18, 2011 at 16:44
  • continuous is set to YES per default when you add a slider with IB
    – Felix
    May 18, 2011 at 16:45
  • Does that make any difference if i do it directly through code and not through IB?? i would really appreciate if you give some solution with code and not with IB as on my end that would be a big mess to change the slider to work from IB.
    – Ashutosh
    May 18, 2011 at 17:13
  • When i am doing self._statSlider its giving me errors saying object cannot be set -either readonly property or no setter found.
    – Ashutosh
    May 18, 2011 at 18:34
3

You can access the rect for the slider's thumb image view with -thumbRectForBounds:trackRect:value:], so if you add a UILabel subview you can align it relative to the thumb image view in -layoutSubviews using this returned rect.

However, if you'd like to use Autolayout to align your label with the thumb image then you need access to the thumb's UIImageView directly. I'm not keen on spelunking the subviews of UIKit kit components generally, but I think you can use details of the public API to search for the image view in a future-proofed way:

- (UIImageView*) thumbImageView {
    __block UIImageView *imageView = nil;
    [self.subviews enumerateObjectsWithOptions:NSEnumerationReverse usingBlock:^(UIImageView *candidate, NSUInteger idx, BOOL *stop)
    {
        if ([candidate isKindOfClass:[UIImageView class]] && candidate.image ==
                [self thumbImageForState:UIControlStateNormal])
        {
            imageView = candidate;
            *stop = YES;
        }
    }];
    return imageView;
}

The API provides the ability to set a UIImage for the thumb, so you can use this as a test to ensure that you aren't getting some other image view. This is even safer if you are explicitly setting a thumb image yourself (since it's not impossible that the slider might be changed to draw the thumb image in future...). Also, the thumb image view is currently the last subview (not guaranteed going forward), so I'm doing a reverse enumeration here to hopefully get it as faster as possible whilst not making assumptions about its index.

NB: I had to create my thumb label lazily, since UISlider's subviews seem to be so.

3
  • @SandeepAggarwal which SDK? Jan 20, 2016 at 14:19
  • Sorry! I was using this code before the Slider gets added, now working when I call this code snippet in layoutSubviews.Thanks!! Jan 20, 2016 at 14:30
  • 1
    Ok, that's good news. It would be strange for this to break on a non major version. UIKit tends to be rather "lazy", so not surprising to hear this Jan 20, 2016 at 14:32
0

make this nice and easy.. first off this is the final result

enter image description here

and now, code:

UILabel *sl = [UILabel new];
[v addSubview:sl];
[sl constraintHeightEqualTo:12 widthTo:26];
UIImageView *handleView = [slider.subviews lastObject];

[self.view constraintVerticalSpacingSubviewsFromBottomView:s toTopView:sl constant:10];
[self.view constraintCenterXOfView:sl equalToView:handleView];
[sl setText:@"100%"];
[sl setFont:[UIFont systemFontOfSize:10]];
self.sliderLabel = sl;

the above methods are used from an NSLayoutConstraint category i use (coming soon)

- (id)constraintHeightEqualTo:(CGFloat)height widthTo:(CGFloat)width
{
    [self setTranslatesAutoresizingMaskIntoConstraints:NO];
    [self constraintHeightEqualTo:height];
    [self constraintWidthEqualTo:width];
    return self;
}
- (id)constraintVerticalSpacingSubviewsFromBottomView:(UIView *)fromView toTopView:(UIView *)toView constant:(CGFloat)constant

{
    NSLayoutConstraint *cn = [NSLayoutConstraint constraintWithItem:fromView
                                                          attribute:NSLayoutAttributeTop
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:toView
                                                          attribute:NSLayoutAttributeBottom
                                                         multiplier:1
                                                           constant:constant];
    [self addConstraint:cn];
    return self;
}

- (id)constraintCenterXOfView:(UIView *)fromView equalToView:(UIView *)toView constant:(CGFloat)constant
{
    NSLayoutConstraint *cn = [NSLayoutConstraint constraintWithItem:fromView
                                                          attribute:NSLayoutAttributeCenterX
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:toView
                                                          attribute:NSLayoutAttributeCenterX
                                                         multiplier:1 constant:constant];

    [self addConstraint:cn];
    return self;
}
1
  • do you have sample for this? Jul 12, 2016 at 9:46
0
- (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];
}
0

Well, I subclassed the UISlider and override the methods of NSControl. You just need to change your class into storyboard

I label can be add above thumb as per requirement.

class CustomSlider: UISlider {


let label = UILabel()

override func beginTracking(_ touch: UITouch, with event: UIEvent?) -> Bool {
    let track = super.beginTracking(touch, with: event)
    label.text = "\(Int(self.value))"
    label.frame = CGRect.init(x: self.thumbCenterX, y: -10, width: 20, height: 20)
    self.addSubview(label)
    return track
}


override func continueTracking(_ touch: UITouch, with event: UIEvent?) -> Bool {
    let track = super.continueTracking(touch, with: event)
    label.frame = CGRect.init(x: self.thumbCenterX - 5 , y: 6, width: 30, height: 20)
    label.text = "\(Int(self.value))"
    return track
}

override func endTracking(_ touch: UITouch?, with event: UIEvent?) {
    super.endTracking(touch, with: event)
    label.removeFromSuperview()
}}



extension UISlider {
var thumbCenterX: CGFloat {
    let trackRect = self.trackRect(forBounds: frame)
    let thumbRect = self.thumbRect(forBounds: bounds, trackRect: bounds, value: value)
    return thumbRect.midX
}}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.