Hide UISlider thumb image

Question

I am trying to create a UISlider without the thumb image.

How can I do this, this is my code so far:

UISlider *sli = [[UISlider alloc] initWithFrame:progressView.frame];
    [sli setThumbImage:nil forState:UIControlStateNormal];
    [sli setBackgroundColor:[UIColor clearColor]];

    [sli setMinimumTrackImage:[[UIImage imageNamed:@"ProgressBlueCap.png"] stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0] forState:UIControlStateNormal];
    [sli setMaximumTrackImage:[[UIImage imageNamed:@"ProgressBlueCapRight.png"] stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0] forState:UIControlStateNormal];

Have you tried setting a transparent 1x1 image? I don't that it's possible to remove the thumb that easily. — Nick Weaver, Apr 22 '11 at 16:08
There is a user-interaction problem with using a UISlider for this. When a user sees a thumb, they know they should tap on the thumb to drag it. If you don't have a thumb, then they might think they can tap anywhere on the slider - and expect it to move to that value. This isn't going to happen. This means that you have an invisible thumb, but the user has to touch and drag the invisible element to use the slider... — Confused Vorlon, Oct 08 '15 at 12:57

score 63 · Accepted Answer · edited Dec 11 '17 at 22:37

63

Much simpler:

Objc

[sli setThumbImage:[[[UIImage alloc] init] autorelease] forState:UIControlStateNormal];

Swift version

sli.setThumbImage(UIImage(), for: .normal)

edited Dec 11 '17 at 22:37

Kevin Jantzer

9,215
2
28
52

answered Sep 14 '11 at 16:52

jakeboxer

3,300
4
26
27

This is not draggable! – Damien Romito Apr 30 '15 at 14:07
If you want to make this work _and_ be draggable, then you'd have to subclass and override the hitTest. – Confused Vorlon Oct 08 '15 at 12:57

score 17 · Answer 2 · answered Aug 12 '15 at 08:28

17

The easiest way is simply setting the Thumb Tint colour to Clear on the Interface Builder - like so...

Voila!

answered Aug 12 '15 at 08:28

Jim Tierney

4,078
3
27
48

9

the downside of this solution is that the slider still thinks it has a thumb which is ~40px wide, so when you drag all the way to the left/right, there is still some of the track coloured/uncoloured as it is being drawn 'behind' the thumb. – Confused Vorlon Oct 08 '15 at 12:56
This only works for me on iOS 8.3 and above. For some reason, for iOS 8.0 - 8.2, the slider still shows despite setting the tint color to clear. – JAL Nov 04 '15 at 20:09
not working, with clear color you will have a small line – Pablo Cegarra Jun 20 '16 at 07:01
How can we programtically set the thumb tint color? – Noitidart Mar 12 '18 at 08:31

score 12 · Answer 3 · edited May 06 '19 at 22:57

12

This is an old thread but I found it so someone else may as well.

Here's a solution to this in Swift. I'm creating a blank UIImage here programatically and then assigning it to the thumb.

    let rect = CGRect(x: 0, y: 0, width: 1, height: 1)
    UIGraphicsBeginImageContextWithOptions(CGSize(width: 1, height: 1), false, 0)
    UIColor.clear.setFill()
    UIRectFill(rect)
    if let blankImg = UIGraphicsGetImageFromCurrentImageContext() {
        slider.setThumbImage(blankImg, for: .normal)
    }
    UIGraphicsEndImageContext()

edited May 06 '19 at 22:57

beryllium

29,669
15
106
125

answered Apr 08 '15 at 22:56

allocate

1,323
3
14
28

This worked for me! In Objective C my code looked like this: `CGRect thumbRect = CGRectMake(0,0,1,1); UIGraphicsBeginImageContextWithOptions(CGSizeMake(1,1), false, 0); [[UIColor clearColor] setFill]; UIRectFill(thumbRect); UIImage* blankImg = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext( ); [slider setThumbImage:blankImg forState:UIControlStateNormal];` – Olivia Stork Apr 09 '15 at 21:29
Thanks for this - very charming – etayluz Aug 18 '16 at 02:54

score 1 · Answer 4 · edited Sep 01 '15 at 11:30

1

One line solution:

[_slider setThumbImage:[UIImage new] forState:UIControlStateNormal];

edited Sep 01 '15 at 11:30

jarlh

42,561
8
45
63

answered Jul 03 '15 at 07:32

Praveen Sevta

149
1
3

score 0 · Answer 5 · answered Apr 22 '11 at 16:13

0

I'd try subclassing UISlider and override -thumbRectForBounds:trackRect:value: to return NSZeroRect. If that doesn't do it, try overriding -thumbImageForState: to return nil.

answered Apr 22 '11 at 16:13

NSResponder

16,861
7
32
46

Hide UISlider thumb image

5 Answers5

Much simpler: