ios - How to create a custom UISlider

Question

Hi How can i create a custom UISlider like the image below.

I googled a lot still couldn't able to find a way to do that. Can anybody suggest me how to achieve this. Any help would be greatly appreciated.

Answer 1

Custom UISlider

ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController :UIViewController
{
}

@property (strong, nonatomic) IBOutlet UILabel *LineLbl;
@property (strong, nonatomic) IBOutlet UIScrollView *scrollviewObj;

@end

ViewController.m

#import "ViewController.h"

@interface ViewController ()
{

}

@end

@implementation ViewController
@synthesize LineLbl;
@synthesize scrollviewObj;


- (void)viewDidLoad 
{
   [super viewDidLoad];

   UISlider *slider = [[UISlider alloc]initWithFrame:CGRectMake(10,LineLbl.frame.origin.y + LineLbl.frame.size.height +20, self.view.frame.size.width -20, 20)];
   slider.maximumValue = 1;
   slider.value = 0.6;
   [slider setMinimumTrackTintColor:[UIColor clearColor]];
   [slider setMaximumTrackTintColor:[UIColor clearColor]];
   [slider setThumbImage:[UIImage imageNamed:@"sliderImg"] forState:UIControlStateNormal];

   CAGradientLayer *red_gradient =[CAGradientLayer layer];

   UIColor *startColor=[UIColor yellowColor];
   UIColor *midColor=[UIColor colorWithRed:(155/255.f) green:(250/255.f) blue:(90/255.f) alpha:1];
   UIColor *endColor= [UIColor colorWithRed:(96/255.f) green:(255/255.f) blue:(59/255.f) alpha:1];

   red_gradient.frame = slider.bounds;
   red_gradient.colors = [NSArray arrayWithObjects:(id)[startColor CGColor], (id)[midColor CGColor],(id)[endColor CGColor], nil];

   [red_gradient setStartPoint:CGPointMake(0.0, 0.5)];
   [red_gradient setEndPoint:CGPointMake(1.0, 0.5)];

   [slider.layer insertSublayer:red_gradient atIndex:2];

   [scrollviewObj addSubview: slider];
}

I followed this.