SoFunction
Updated on 2025-04-03

Summary of UISlider slider component usage in iOS

The slider on the PC is ugly because we can only drag it through the mouse. But when Jobs ported it to iOS everything became cool because we could drag it through our fingers, which was wonderful.
The slider provides a visible way to make range adjustments, and the user can change its value by dragging a slider and configure it to suit different value ranges. You can set the range of slider values, add pictures at both ends, and make various adjustments to make it more beautiful. The slider is ideal for use indicative of selecting over a wide range of (but not precise) values, such as volume settings, sensitivity control, and so on.
1. Create
The slider is a standard UIControl. We can create it through code, just like the width and height of the switch (UISwitch) will be ignored, the height of the slider will be ignored (but the width will not):

Copy the codeThe code is as follows:

UISlider* mySlider = [ [ UISlider alloc ] initWithFrame:CGRectMake(20.0,10.0,200.0,0.0) ];// Just set the height to 0

2. Set range and default value
When creating, we need to set the range of the slider. If you do not set it, the default value between 0.0 and 1.0 will be used. UISlider provides two properties to set the range: mininumValue and maxinumValue:
Copy the codeThe code is as follows:

= 0.0;//Lower limit
= 50.0;//Upper limit

You can also set a default value for the slider:
Copy the codeThe code is as follows:

= 22.0; 

3. Add pictures at both ends
The slider can display images in any segment. Adding an image will cause the slider to be shortened, so remember to increase the width of the slider when creating it to fit the image.
Copy the codeThe code is as follows:

[ mySlider setMininumTrackImage: [ UIImage applicationImageNamed:@"" ] forState: UIControlStateNormal ]; 
[ mySlider setMaxinumTrackImage: [ UIImage applicationImageNamed:@"" ] forState: UIControlStateNormal ]; 

You can display different images according to the various states of the slider. Here are the available statuses:
Copy the codeThe code is as follows:

UIControlStateNormal
UIControlStateHighlighted
UIControlStateDisabled
UIControlStateDisabled
UIControlStateSelected

4. Display controls
Copy the codeThe code is as follows:

[ parentView addSubview:myslider ];//Add to parent view

or
Copy the codeThe code is as follows:

[ addSubview:myslider ];//Add to navigation bar

5. Read control value
Copy the codeThe code is as follows:

float value = ; 

VI. Notification
To receive notifications when the slider value changes, you can use the addTarget method of the UIControl class to add an action to the UIControlEventValueChanged event.
Copy the codeThe code is as follows:

[ mySlider addTarget:self action:@selector(sliderValueChanged:) forControlEventValueChanged ]; 

As long as the slider parks (note that it is parked. If it is to be triggered during dragging, please see the following text) to the new position, your action method will be called:
Copy the codeThe code is as follows:

- (void) sliderValueChanged:(id)sender{ 
        UISlider* control = (UISlider*)sender; 
        if(control == mySlider){ 
                  float value = ; 
/* Add your own processing code */
         } 


If it is also triggered during dragging, you need to set the slider's continuous property:
Copy the codeThe code is as follows:

= YES ; 

The simplest example of this notification is to display the slider's value in real time. The strange thing about Apple shows that the slider's value is a private API (setShowValue). Private is private, and at worst I don't need it. We can use a UILabel to display the value. If we change the value of the label every time the above method is triggered, can we display it in real time? Of course, we can do not only this, there are more cool things to achieve, it depends on your means and imagination.

7. Solution to the gaps on both sides of UISlider
I made a player before, and there were gaps on both sides of the volume bar. When I was interviewing at Sina, the interviewer mentioned this knowledge point. I have been crawling on * for a long time and finally found a way to share it with beginners in iOS.
Rewrite UISlider method

Copy the codeThe code is as follows:

- (CGRect)thumbRectForBounds:(CGRect)bounds trackRect:(CGRect)rect value:(float)value
{
    = - 10 ;
    = +20;
    return CGRectInset ([super thumbRectForBounds:bounds trackRect:rect value:value], 10 , 10);
}

Of course, there are several ways to rewrite UISlider
Copy the codeThe code is as follows:

-(CGRect)trackRectForBounds:(CGRect)bounds
{
    =15;
    =/3;
    =/5;
    =-30;
    return bounds;
}
- (CGRect)minimumValueImageRectForBounds:(CGRect)bounds;
- (CGRect)maximumValueImageRectForBounds:(CGRect)bounds;