/ValueTrackingSlider

A UISlider subclass that displays the slider value in a popUpView

Primary LanguageObjective-CMIT LicenseMIT

ValueTrackingSlider

What is it?

A UISlider Subclass that displays live values in a popUpView. It’s inspired by the implementation found here. This version is built using CALayers, it offers a few more features and it's easy to customize the appearance.

![screenshot] (http://alskipp.github.io/ValueTrackingSlider/img/screenshot1.gif)

Features

  • Live updating of UISlider value
  • Customizable properties:
    • textColor
    • font
    • popUpViewColor
    • popUpViewAnimatedColors - color animates as slider value changes
  • Set your own NSNumberFormatter to control the displayed values
  • Wholesome springy animation

Which files are needed?

If you use CocoaPods then simply add pod 'ASValueTrackingSlider' to your podfile.

Alternatively, just include these two files in your project:

  • ASValueTrackingSlider.h
  • ASValueTrackingSlider.m

How to use it

It’s very simple. Drag a UISlider into your Storyboard/nib and set its class to ASValueTrackingSlider – that's it. The examples below demonstrate how to customize the appearance and value displayed.

self.slider.maximumValue = 255.0;
[self.slider setMaxFractionDigitsDisplayed:0];
self.slider.popUpViewColor = [UIColor colorWithHue:0.55 saturation:0.5 brightness:0.9 alpha:0.8];
self.slider.textColor = [UIColor colorWithHue:0.55 saturation:1 brightness:0.4 alpha:1];
self.slider.font = [UIFont fontWithName:@"Menlo-Bold" size:22];

![screenshot] (http://alskipp.github.io/ValueTrackingSlider/img/screenshot2.png)

NSNumberFormatter *formatter = [[NSNumberFormatter alloc] init];
[formatter setNumberStyle:NSNumberFormatterPercentStyle];
[self.slider setNumberFormatter:formatter];
self.slider.popUpViewAnimatedColors = @[[UIColor purpleColor], [UIColor redColor], [UIColor orangeColor]];
self.slider.font = [UIFont fontWithName:@"Futura-CondensedExtraBold" size:26];

![screenshot] (http://alskipp.github.io/ValueTrackingSlider/img/screenshot3.png)

The popUpView adjusts itself so that it doesn't extend beyond the width of the slider control.