HUMSlider

A slider control with auto-appearing ticks and saturating images at each end. Straight from the codebase of Hum.

##Setup

To use this control, we strongly recommend using CocoaPods. To do so add the following to your Podfile:

pod 'HUMSlider', ~>'1.0'

and then pod install.

##Usage

A quick programmatic example of the most common use case:

    HUMSlider *slider = [[HUMSlider alloc] init];

	// Set the images to be saturated and desaturated
	slider.minimumValueImage = [UIImage imageNamed:@"minImage"];
    slider.maximumValueImage = [UIImage imageNamed:@"maxImage"];
    
    // What color should the image be when the thumb is close to it?
    slider.saturatedColor = [UIColor greenColor];
    
    // What color should the image be when the thumb is not close to it?
    slider.desaturatedColor = [[UIColor redColor] colorWithAlpha:0.5f]; 
    
    // How many ticks do you want?
    slider.sectionCount = 11; // This should be an odd number.
    
    // What color should the ticks be?
    slider.tickColor = [UIColor blackColor];    

Full code is available in the sample app included in this repo.

##Usage notes

• The number of ticks must be odd - otherwise pretty much all the math for centering things breaks spectacularly. Attempting to add an even number of ticks will cause an assertion failure during development.
• If you are using a custom thumb image which has some clear space at the top, use the pointAdjustmentForCustomThumb property to compensate for this.
• This control defines its own intrinsic content height based on how high the ticks will pop up, but does not define its own intrinsic content width.
• Images passed in as min/max images will automatically be set to use UIImageRenderingModeAlwaysTemplate in order to facilitate the saturation and desaturation of the image using tint colors.
• Images will perform best when they're un-styled. Let the code set the colors.
• If no min/max images are passed in, the slider track will take up the full length of the control.
• If you set the saturatedColor or desaturatedColor properties, it will set the same color on both sides. Use the setSaturatedColor:forSide: and setDesaturatedColor:forSide to set separate colors per side.

#Contributors

• Design: Aaron Shekey
• Engineering: Ellen Shapiro