More sensitive or responsive custom UISlider

Normally a slider contains a limited area to detect the touch & act on that. Default height of a

slider is 23 pixels, in which the thumb contains only 19 pixels area to get the touch.

Sometimes we need to use a slider which should act more smooth & responsive just like the native "Slide to unlock" button of iPhone. So, for that, we need to increase the area of touch of a slider.

To make a slider with increased touch area, at first you need to make a subclass of UISlider, such as MySlider.

So MySlider.h file will look like this:

#import

@interface MySliderClass : UISlider {

}

@end

MySlider.m file will look like this:

#import "MySliderClass.h"

/* How many extra touchable pixels you want above and below
the 23px (default height) slider */

#define SIZE_EXTENSION_Y -10 // Adjust this value as required in your project

// Define another value if you want to extend size in x-axis

@implementation MySliderClass

- (BOOL) pointInside:(CGPoint)point withEvent:(UIEvent*)event {

NSLog(@"pointSide");

CGRect bounds = self.bounds;

bounds = CGRectInset(bounds, 0, SIZE_EXTENSION_Y);

return CGRectContainsPoint(bounds, point);

}

@end

Now in your interface builder, set the slider to use your new MySlider subclass, and you now have a slider with a 43px touchable height.

How to make a slider button just like iPhone's native Unlock Button

/* In the above screen shot, i've used the UISlider as a alarm triggering object. (as required in an application) */

/* Use your custom images as your requirements. Declare required variables & objects in *.h file. You will need a UIImageView, a UILabel, a UIButton & a UISlider in your NIB file and locate them to desired name.*/

- (void)viewDidLoad {
[super viewDidLoad];
// initialize custom UISlider (you have to do this in viewdidload or applicationdidfinishlaunching.
UIImage *stetchLeftTrack= [[UIImage imageNamed:@"Nothing.png"]
stretchableImageWithLeftCapWidth:30.0 topCapHeight:0.0];
UIImage *stetchRightTrack= [[UIImage imageNamed:@"Nothing.png"]
stretchableImageWithLeftCapWidth:30.0 topCapHeight:0.0];
[mySlider setThumbImage: [UIImage imageNamed:@"SlideToStop.png"] forState:UIControlStateNormal];
[mySlider setMinimumTrackImage:stetchLeftTrack forState:UIControlStateNormal];
[mySlider setMaximumTrackImage:stetchRightTrack forState:UIControlStateNormal];

}


-(IBAction)LockIt
{
mySlider.hidden = NO;
lockButton.hidden = YES;
Container.hidden = NO;
myLabel.hidden = NO;
myLabel.alpha = 1.0;
UNLOCKED = NO;
mySlider.value = 0.0;
NSString *str = @"The iPhone is Locked!";
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Locked" message:str delegate:self cancelButtonTitle:nil otherButtonTitles:@"OK", nil];
[alert show];
[alert release];
}

-(IBAction)fadeLabel
{
myLabel.alpha = 1.0 - mySlider.value;
}

-(IBAction)UnLockIt
{
if (!UNLOCKED)
{
if (mySlider.value == 1.0)
{ // if user slide far enough, stop the operation
// Put here what happens when it is unlocked

mySlider.hidden = YES;
lockButton.hidden = NO;
Container.hidden = YES;
myLabel.hidden = YES;
UNLOCKED = YES;
}
else
{
// user did not slide far enough, so return back to 0 position
[UIView beginAnimations: @"SlideCanceled" context: nil];
[UIView setAnimationDelegate: self];
[UIView setAnimationDuration: 0.35];
// use CurveEaseOut to create "spring" effect
[UIView setAnimationCurve: UIViewAnimationCurveEaseOut];
mySlider.value = 0.0;
[UIView commitAnimations];

/* if u don't want to use custom animation with desired duration then u can use the following line :

[mySlider setValue:0.0 animated:YES];
*/

}
}
}