Customizing a slider control

Question

I want to customize the slider control but can't find any thing to apply, the slider I want to make should be something like the following image. Please any one suggest me how can I make it....

. enter image description here

score 8 · Accepted Answer · answered May 03 '11 at 05:58

8

try this code..

CGRect frame = CGRectMake(174, 12.0, 120.0, 40);
customSlider = [[UISlider alloc] initWithFrame:frame];
[customSlider addTarget:self action:@selector(sliderAction:) forControlEvents:UIControlEventValueChanged];
// in case the parent view draws with a custom color or gradient, use a transparent color
customSlider.backgroundColor = [UIColor clearColor];    
UIImage *stetchLeftTrack = [[UIImage imageNamed:@"orangeslide.png"]
                            stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0];
UIImage *stetchRightTrack = [[UIImage imageNamed:@"yellowslide.png"]
                             stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0];
[customSlider setThumbImage: [UIImage imageNamed:@"slider_ball.png"] forState:UIControlStateNormal];
[customSlider setMinimumTrackImage:stetchLeftTrack forState:UIControlStateNormal];
[customSlider setMaximumTrackImage:stetchRightTrack forState:UIControlStateNormal];
customSlider.minimumValue = 0.0;
customSlider.maximumValue = 100.0;
customSlider.continuous = YES;
customSlider.value = 50.0;

// Add an accessibility label that describes the slider.
[customSlider setAccessibilityLabel:NSLocalizedString(@"CustomSlider", @"")];
[self.view addSubview:customSlider];
customSlider.tag = 1;

answered May 03 '11 at 05:58

Aman Aggarwal

3,754
1
19
26

it's a good post but it doesn't match my requirement friend.. I don't want to change the minimumTrackImage and maximumTrackImage of slider but these needs to be stable and should look as in the image in the question..Please tell me anything related to that!! – iOS Monster May 03 '11 at 06:18
Copy and pasted from this source: http://uispec.googlecode.com/svn/trunk/xcode/UICatalogDemo/ControlsViewController.m – DarkDust May 04 '11 at 06:48
1

No its copy and pasted from apple sample code not from the link provided by you – Aman Aggarwal May 04 '11 at 06:53
as I told it's a good post and I appreciate the effort done by you my friend. It doesn't matter whether it's a copy and paste from any where but I found the way to solution for my problem. It's not the exactly the answer I needed but it gave me some idea to find solution. I made some changes in this code and I solved my problem....Thanx Aman!! – iOS Monster May 05 '11 at 06:11
1

Dear, Sudhanshu if you have found your question's exact solution than post here, So others can also aware. Included me also.. i am also looking for same.. – Solid Soft Jun 29 '12 at 11:30

score 8 · Answer 2 · edited Oct 12 '13 at 12:25

8

Try this

CGRect frame = *youe required frame*;
UISlider * customSlider = [[UISlider alloc] initWithFrame:frame];

// in case the parent view draws with a custom color or gradient, use a transparent color
customSlider.backgroundColor = [UIColor clearColor];    
UIImage *stetchLeftTrack = [[UIImage imageNamed:@"orangeslide.png"]
                                        stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0];
UIImage *stetchRightTrack = [[UIImage imageNamed:@"yellowslide.png"]
                                         stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0];
[customSlider setThumbImage: [UIImage imageNamed:@"slider_ball.png"] forState:UIControlStateNormal];
[customSlider setMinimumTrackImage:stetchLeftTrack forState:UIControlStateNormal];
[customSlider setMaximumTrackImage:stetchRightTrack forState:UIControlStateNormal];
customSlider.minimumValue = 0.0;
customSlider.maximumValue = 100.0;
customSlider.continuous = YES;
customSlider.value = 50.0;
[customSlider addTarget:self action:@selector(sliderAction:) forControlEvents:UIControlEventValueChanged];
[self.view addSubView:customSlider];
[customSlider release];

it result in this:-

add images according to your requirement this code result in this slider

edited Oct 12 '13 at 12:25

D-eptdeveloper

2,430
1
16
30

answered May 03 '11 at 06:02

Gypsa

11,230
6
44
82

@iphone monster this is the code used in UICatalog sample application.First I think to give you a link but then I give only the relevant code.Aman also might think this but anyways it gud that you got the solution.:) – Gypsa May 03 '11 at 06:32
friend the problem is not solved yet :( , I don't want to change the minimumTrackImage and maximumTrackImage of slider, these images should not be there but the slider look like as shown in picture in question..please tell me if there is any other solution for that!! :( – iOS Monster May 03 '11 at 06:38
@SudhanshuSrivastava how else are you going to get a red-green colored slider track if you DONT change the image. i quote APPLE - "Slider controls draw the track using two distinct images, which are customizable" – Jul 13 '12 at 02:44
Thank for your wonder full post, its really helpful if you want to use custom controll – ravinder521986 Apr 11 '15 at 08:57

Customizing a slider control

2 Answers2

Linked