Horizontal and vertical slidebar with custom track image/color

Question

How can I create a horizontal and vertical slidebar with custom track image/color with the use of xib?

currently I've taken a horizontal slidebar with xib and now I need customization on it like above stated.

currently using this code to make my UISlider to show in vertical position:

CGAffineTransform sliderRotation = CGAffineTransformIdentity;
sliderRotation = CGAffineTransformRotate(sliderRotation, -(M_PI / 2));
customSliderVertical.transform = sliderRotation;

Answer 1

finally after some efforts and time found the solution which helped to get the desired output and i got my vertical and horizontal UISlider with the below code:

/////////////Vertical Slider/////////////
[customSliderVertical addTarget:self action:@selector(sliderAction:) forControlEvents:UIControlEventValueChanged];
// in case the parent view draws with a custom color or gradient, use a transparent color
customSliderVertical.backgroundColor = [UIColor clearColor];
customSliderVertical.opaque = 20.0;
UIImage *stretchUpTrack = [[UIImage imageNamed:@"color.png"]
                            stretchableImageWithLeftCapWidth:0.0 topCapHeight:0.0];
UIImage *stretchDownTrack = [[UIImage imageNamed:@"color2.png"]
                             stretchableImageWithLeftCapWidth:0.0 topCapHeight:0.0];
[customSliderVertical setThumbImage:[UIImage imageNamed:@"rounded.png"]forState:UIControlStateNormal];
[customSliderVertical setMinimumTrackImage:stretchUpTrack forState:UIControlStateNormal];
[customSliderVertical setMaximumTrackImage:stretchDownTrack forState:UIControlStateNormal];
customSliderVertical.minimumValue = 0.0;
customSliderVertical.maximumValue = 100.0;
customSliderVertical.continuous = NO;
customSliderVertical.value = 50.0;
CGAffineTransform sliderRotation = CGAffineTransformIdentity;
sliderRotation = CGAffineTransformRotate(sliderRotation, -(M_PI / 2));
customSliderVertical.transform = sliderRotation;

/////////////Horizontal Slider/////////////    
[customSliderHorizontal addTarget:self action:@selector(sliderAction:) forControlEvents:UIControlEventValueChanged];
// in case the parent view draws with a custom color or gradient, use a transparent color
customSliderHorizontal.backgroundColor = [UIColor clearColor];
customSliderHorizontal.opaque = 20.0;
UIImage *stretchLeftTrack2 = [[UIImage imageNamed:@"color.png"]
                             stretchableImageWithLeftCapWidth:0.0 topCapHeight:0.0];
UIImage *stretchRightTrack2 = [[UIImage imageNamed:@"color2.png"]
                              stretchableImageWithLeftCapWidth:0.0 topCapHeight:0.0];
[customSliderHorizontal setThumbImage:[UIImage imageNamed:@"rounded.png"]forState:UIControlStateNormal];
[customSliderHorizontal setMinimumTrackImage:stretchLeftTrack2 forState:UIControlStateNormal];
[customSliderHorizontal setMaximumTrackImage:stretchRightTrack2 forState:UIControlStateNormal];
customSliderHorizontal.minimumValue = 0.0;
customSliderHorizontal.maximumValue = 100.0;
customSliderHorizontal.continuous = NO;
customSliderHorizontal.value = 50.0;