How to make UISlider's "track" invisible?

Question

I'm trying to emulate Apple's "Slide to Unlock" feature in my application. I get to this point (image below), but as you can see the UISlider's "track" is visible and is covering up my text. Is there a way to change an attribute programmatically that will make the "track" invisible?

Please let me know if you need any of my code.

Thanks in advance!

EDIT: If I change the slider's alpha to 0, it gets rid of my sliding button, so doing that won't work unless I'm doing it wrong. :)

Frohman

It's against Apple's Human Interface Guidelines to replicate the slide to unlock UI. – Cleft

Answer 1

Actually I just figured it out. Here's what I did:

UIImage *sliderMinimum = [[UIImage imageNamed:@"clearTrack.png"] stretchableImageWithLeftCapWidth:4 topCapHeight:0];
[slider setMinimumTrackImage:sliderMinimum forState:UIControlStateNormal];
UIImage *sliderMaximum = [[UIImage imageNamed:@"clearTrack.png"] stretchableImageWithLeftCapWidth:4 topCapHeight:0];
[slider setMaximumTrackImage:sliderMaximum forState:UIControlStateNormal];

clearTrack.png is just a clear slider image I made.

Now I have this: yay!

Frohman

Thanks btw, I never thought about this method. It's much simpler and faster than the other methods – Jugal

Beautifully simple solution for this problem. – Hollyanne

You don't even need to provide an image file - see other answers. – Garlaand

On an iPad (iOS 8), there is still an image (a shadow perhaps) drawn for the minimum track. – Orthognathous

Answer 2

here's an even easier way. No need to create images, just instantiate an empty UIImage class :P

UIImage *clearImage = [[UIImage alloc] init];
[self.slider setMinimumTrackImage:clearImage forState:UIControlStateNormal];
[self.slider setMaximumTrackImage:clearImage forState:UIControlStateNormal];

Kaylee

Answer 3

There probably isn't a way to hide the track; the "slide to unlock" doesn't behave like a UISlider and is probably a custom control. You might be able to hack the slider control, maybe by setting opacity low (0 will make it hidden and it won't receive touches), but if you go that route you will probably have something break after an OS update. Apple doesn't bend over backwards for compatibility like Microsoft does.

The right way to do this is with a custom control. It may seem like more work than using a UISlider, but it's not if you compare it against all the time you have spent and/or will spend hacking a UISlider.

To do it: subclass UIControl. Write your own drawing code to make it look right (you can probably reuse some of whatever you are doing now). Then register for touch events to move the slider handle:

• UIControlEventTouchDown: if it's on the handle, set a "moving" flag
• UIControlEventTouchDragInside: if the moving flag is set, move the handle to the touch position; you can just update an instance variable, call setNeedsDisplay to draw it in the new position.
• UIControlEventTouchUpInside: if moving flag is set, and handle is at end, unlock

If you want to mimic the real unlock handle, play around with it and see how it behaves. You might need to respond to the events differently (what happens if you drag outside the slider path). But you should be able to get the gist of it.

Rarefaction

Great answer, I'll try changing the opacity to a low setting, and if that doesn't work I'll have to try to make my own control. Thanks for the answer! – Frohman

Answer 4

In Swift:

slider.setMinimumTrackImage(UIImage(), forState: .Normal)
slider.setMaximumTrackImage(UIImage(), forState: .Normal)

Garlaand

Good answer, but I recommend you remove everything after the first block of code. It is very tangential to the question, and the TL;DR is that using one or two empty images is fine. – Centuple

Answer 5

In answer to the stated question, you can set a transparent 1px png for the minimum and maximum track images.

Director

That's exactly the problem, as you can see in my answer above. – Frohman

You must not have seen my answer in time. Please leave benzado's answer selected. That approach is correct for what you're trying to accomplish. – Director

Answer 6

Looks like just setting the tint color to clear does it...

    [slider setMinimumTrackTintColor:[UIColor clearColor]];
    [slider setMaximumTrackTintColor:[UIColor clearColor]];

Craps

Answer 7

Answer by @Arjay Waran is the best in my opinion.

Heres the Swift 3.0 Version of it.

slider.minimumTrackTintColor = UIColor.clear
slider.maximumTrackTintColor = UIColor.clear

Cheers

Phonsa

Answer 8

From Story Board:-

select clear color for Min Track and Max Track

Wiredraw