Search code examples
iosobjective-cuislideruicontrol

UISlider custom track image not setting up properly

I created a UISlider which has different custom images for minimum and maximum track.

This is the normal state for UISlider

But when I slide the UISlider second image is broken. Its not setting up properly.

Can anyone tell me whats wrong with it?

Heres my code:

    slider = [[UISlider alloc] initWithFrame:CGRectMake(24, 24, [VTUIKit screenWidth] - 48, 10)];
    slider.tintColor = kVTColorTurquoise500;
    [slider setBackgroundColor:[UIColor clearColor]];
    numbers = @[@(0.5), @(1), @(2.5), @(5), @(10), @(25), @(50), @(100), @(200), @(500), @(999)];
    NSInteger numberOfSteps = ((float)[numbers count] - 1);
    
    slider.maximumValue = numberOfSteps;
    slider.minimumValue = 0;
    slider.continuous = YES;
    
    UIImage *stetchLeftTrack = [[UIImage imageNamed:@"Map-Range-Active"]
                                stretchableImageWithLeftCapWidth:5 topCapHeight:0.0];
    UIImage *stetchRightTrack = [[UIImage imageNamed:@"Map-Range"]
                                 stretchableImageWithLeftCapWidth:5 topCapHeight:0.0];
    [slider setMinimumTrackImage:stetchLeftTrack forState:UIControlStateNormal];
    [slider setMaximumTrackImage:stetchRightTrack forState:UIControlStateNormal];
    
    [slider addTarget:self action:@selector(sliderValueChanged:) forControlEvents:UIControlEventValueChanged];
    [self.bottomContainerView addSubview:slider];

Any help would be much appreciated. Thanks in advance.

Solution

  • Ok after so many trial and errors and referring so many answers I got my answer. In order to have a similar UISlider like my, I had to set minimum and maximum Track image as follow

    UIImage * stetchLeftTrack = [[UIImage imageNamed:@"leftImage"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
UIImage * stetchRightTrack = [[UIImage imageNamed:@"rightImage"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];

    But here the catch is , that both the images have to exact same size(width) as slider.

    So, thats how I got rid of my issue.