Got it, let's build that custom slider you're after! Since you couldn't find an Objective-C version of that Swift library, we'll roll our own. We'll cover two core customizations: boosting the track height and adding a custom image to the thumb.

Step 1: Create a Custom Slider Subclass #

First, make a new CustomSlider class that inherits from UISlider. This lets us override the methods that control track and thumb sizing.

CustomSlider.h #

#import <UIKit/UIKit.h>

@interface CustomSlider : UISlider

// Optional: Expose a property to set track height dynamically
@property (nonatomic, assign) CGFloat customTrackHeight;

@end

CustomSlider.m #

#import "CustomSlider.h"

@implementation CustomSlider

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        _customTrackHeight = 10.0; // Default track height
        [self setupCustomThumb];
    }
    return self;
}

- (void)awakeFromNib {
    [super awakeFromNib];
    _customTrackHeight = 10.0;
    [self setupCustomThumb];
}

// Override to adjust track height
- (CGRect)trackRectForBounds:(CGRect)bounds {
    // Keep the width the same as the bounds, adjust height
    CGRect trackRect = [super trackRectForBounds:bounds];
    trackRect.size.height = self.customTrackHeight;
    // Center the track vertically in the slider bounds
    trackRect.origin.y = bounds.origin.y + (bounds.size.height - trackRect.size.height) / 2;
    return trackRect;
}

// Override to ensure thumb stays centered over the resized track
- (CGRect)thumbRectForBounds:(CGRect)bounds trackRect:(CGRect)trackRect value:(float)value {
    CGRect thumbRect = [super thumbRectForBounds:bounds trackRect:trackRect value:value];
    // Center thumb vertically relative to the track
    thumbRect.origin.y = trackRect.origin.y + (trackRect.size.height - thumbRect.size.height) / 2;
    return thumbRect;
}

// Set up custom thumb image
- (void)setupCustomThumb {
    // Replace "custom_thumb" with your image asset name
    UIImage *thumbImage = [UIImage imageNamed:@"custom_thumb"];
    // Scale image to desired size (optional, adjust as needed)
    thumbImage = [self scaleImage:thumbImage toSize:CGSizeMake(30, 30)];
    
    // Set image for all states (normal, highlighted, selected)
    [self setThumbImage:thumbImage forState:UIControlStateNormal];
    [self setThumbImage:thumbImage forState:UIControlStateHighlighted];
    [self setThumbImage:thumbImage forState:UIControlStateSelected];
}

// Helper method to scale thumb image (optional)
- (UIImage *)scaleImage:(UIImage *)image toSize:(CGSize)newSize {
    UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0);
    [image drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];
    UIImage *scaledImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return scaledImage;
}

@end

Step 2: Use the Custom Slider in Your View Controller #

Now you can use this custom slider either programmatically or via Interface Builder.

Programmatic Example #

#import "ViewController.h"
#import "CustomSlider.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // Create slider frame (adjust position/size as needed)
    CGRect sliderFrame = CGRectMake(40, 200, self.view.frame.size.width - 80, 40);
    CustomSlider *customSlider = [[CustomSlider alloc] initWithFrame:sliderFrame];
    
    // Customize track height (optional, uses default if not set)
    customSlider.customTrackHeight = 12.0;
    
    // Set slider properties
    customSlider.minimumValue = 0.0;
    customSlider.maximumValue = 100.0;
    customSlider.value = 50.0;
    
    // Add to view
    [self.view addSubview:customSlider];
}

@end

Interface Builder Example #

1. Drag a standard UISlider onto your storyboard/xib.
2. Select the slider, go to the Identity Inspector, and set the class to CustomSlider.
3. You can set the customTrackHeight via the Attributes Inspector (add it as a user-defined runtime attribute if needed) or set it programmatically in your view controller.

Key Notes #

• Track Height: The trackRectForBounds: method lets you adjust the track's height and position. We center it vertically to keep the slider visually balanced.
• Thumb Image: Use setThumbImage:forState: to assign images for different control states. The helper scaleImage: method ensures your thumb image fits the size you want.
• Customization: You can extend this further by overriding minimumTrackImageForState: and maximumTrackImageForState: to add custom track images if needed.

内容的提问来源于stack exchange，提问作者Videh Jaiswal