A UISlider subclass that displays the slider value in a popup view

Overview

ASValueTrackingSlider

###What is it?

A UISlider subclass that displays live values in an easy to customize popup view.

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

If you'd like the same functionality for UIProgressView then check out ASProgressPopupView.

Features

  • Live updating of UISlider value

  • Customizable properties:

    • textColor
    • font
    • popUpViewColor
    • popUpViewAnimatedColors - popUpView and UISlider track color animate as value changes
    • popUpViewCornerRadius
    • popUpViewArrowLength
  • Set your own NSNumberFormatter to control the displayed values

  • Optional dataSource - supply your own custom text to the popUpView label

  • Wholesome springy animation

Which files are needed?

For CocoaPods users, simply add pod 'ASValueTrackingSlider' to your podfile. If you'd like to test the included demo project before including it in your own work, then type $ pod try ASValueTrackingSlider in the terminal. CocoaPods will download the demo project into a temp folder and open it in Xcode. Magic.

If you don't use CocoaPods, just include these files in your project:

  • ASValueTrackingSlider (.h .m)
  • ASValuePopUpView (.h .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.popUpViewCornerRadius = 12.0;
[self.slider setMaxFractionDigitsDisplayed:0];
self.slider.popUpViewColor = [UIColor colorWithHue:0.55 saturation:0.8 brightness:0.9 alpha:0.7];
self.slider.font = [UIFont fontWithName:@"GillSans-Bold" size:22];
self.slider.textColor = [UIColor colorWithHue:0.55 saturation:1.0 brightness:0.5 alpha:1];

![screenshot] (http://alskipp.github.io/ASValueTrackingSlider/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/ASValueTrackingSlider/img/screenshot3.png)

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

###How to use custom strings in popUpView label

Set your controller as the dataSource to ASValueTrackingSlider and adopt the ASValueTrackingSliderDataSource, then return NSStrings for any values you want to customize.

// slider has a custom NSNumberFormatter to display temperature in °C
// the dataSource method below returns custom NSStrings for specific values
- (NSString *)slider:(ASValueTrackingSlider *)slider stringForValue:(float)value;
{
    value = roundf(value);
    NSString *s;
    if (value < -10.0) {
        s = @"❄️Brrr!⛄️";
    } else if (value > 29.0 && value < 50.0) {
        s = [NSString stringWithFormat:@"😎 %@ 😎", [slider.numberFormatter stringFromNumber:@(value)]];
    } else if (value >= 50.0) {
        s = @"I’m Melting!";
    }
    return s;
}

![screenshot] (http://alskipp.github.io/ASValueTrackingSlider/img/screenshot4.png)

###How to use with UITableView

To use effectively inside a UITableView you need to implement the <ASValueTrackingSliderDelegate> protocol. If you just embed an ASValueTrackingSlider inside a UITableViewCell the popUpView will probably be obscured by the cell above. The delegate method notifies you before the popUpView appears so that you can ensure that your UITableViewCell is rendered above the others.

The recommended technique for use with UITableView is to create a UITableViewCell subclass that implements the delegate method.

 @interface SliderCell : UITableViewCell <ASValueTrackingSliderDelegate>
 @property (weak, nonatomic) IBOutlet ASValueTrackingSlider *slider;
 @end
 
 @implementation SliderCell
 - (void)awakeFromNib
 {
    self.slider.delegate = self;
 }
 
 - (void)sliderWillDisplayPopUpView:(ASValueTrackingSlider *)slider;
 {
    [self.superview bringSubviewToFront:self];
 }
 @end
Comments
  • Slider not changing between colors when changing value

    Slider not changing between colors when changing value

    self.recordPercentageSlider = [ASValueTrackingSlider new]; self.recordPercentageSlider.delegate = self; self.recordPercentageSlider.frame = CGRectMake(20.0, 45.0, CGRectGetWidth(self.frame) - 2.0 * 20.0, 31.0); //self.recordPercentageSlider.value = 1.0; self.recordPercentageSlider.font = [UIFont fontWithName:@"AvenirNext-Medium" size:15.0]; self.recordPercentageSlider.tintColor = [UIColor autumnColorWithAlpha:ZTAlphaLevelFull]; [self.recordPercentageSlider addTarget:self action:@selector(recordPercentageValueChanged) forControlEvents:UIControlEventValueChanged]; [self.contentView addSubview:self.recordPercentageSlider];

    NSNumberFormatter *numberFormatter = [[NSNumberFormatter alloc] init]; [numberFormatter setNumberStyle:NSNumberFormatterPercentStyle]; [self.recordPercentageSlider setNumberFormatter:numberFormatter]; self.recordPercentageSlider.popUpViewAnimatedColors = @[[UIColor carbonColorWithAlpha:ZTAlphaLevelFull], [UIColor autumnColorWithAlpha:ZTAlphaLevelFull]];

    This is the code I used for inserting the slider but will only display the first color in the array. I used these same lines for two different part of a project, both in table's cells, in which the animation did trigger while the other didn't.

    opened by ghost 16
  • Added snapping capability

    Added snapping capability

    Hello again,

    Sorry, I don't know how to commit my own enhancements, but I added a snapping capability to your project, this way:

    In "ASValueTrackingSlider.h":

    // ADD THESE TWO LINES
    @property (nonatomic) float stepValue;
    - (void)valueChanged;
    

    In "ASValueTrackingSlider.m":

    @interface ASValueTrackingSlider() <ASValuePopUpViewDelegate>
    
    @property (strong, nonatomic) NSNumberFormatter *numberFormatter;
    @property (strong, nonatomic) ASValuePopUpView *popUpView;
    @property (nonatomic) BOOL popUpViewAlwaysOn; // (default is NO)
    // THIS IS NEW:
    @property (nonatomic) float lastQuestionStep;
    
    @end
    
    @implementation ASValueTrackingSlider
    {
        CGSize _popUpViewSize;
        UIColor *_popUpViewColor;
        NSArray *_keyTimes;
        CGFloat _valueRange;
            // THIS IS NEW:
        float _lastQuestionStep;
    }
    
     -(void)setup {
        // ...
        // THIS IS NEW
        if (0.0 == self.stepValue) self.stepValue = 1.0;
        _lastQuestionStep = (self.value) / self.stepValue;
        // ...
    }
    
    // ADD ALSO THIS METHOD
    - (void)valueChanged {
      if (0.0 == self.stepValue) self.stepValue = 1.0;
      float newStep = roundf((self.value) / self.stepValue);
      self.value = newStep * self.stepValue;
    }
    

    valueChanged must be called from UITableViewController when the slider changes its value ( connect an action from slider in storyboard for Value Changed and name it sliderValueChanged)

    In your UITableViewController class:

    - (IBAction)sliderValueChanged:(id)sender {
      [self.slider valueChanged];
    }
    

    In viewDidLoad of your UITableViewController

    - (void)viewDidLoad {
      [super viewDidLoad]
      // ...
      self.slider.minimumValue = 0.0;
      self.slider.maximumValue = 4.0;
      //THIS IS NEW:
      self.slider.stepValue = 1.0;
    }
    

    Greetings from Berlin Kenan.

    opened by appicus 8
  • Missing the file “ValueTrackingSliderTests-Info.plist”

    Missing the file “ValueTrackingSliderTests-Info.plist”

    If i try pod try ASValueTrackingSlider and try to build the xcode project i run in this failure. `error: could not read data from '/tmp/CocoaPods/Try/ASValueTrackingSlider/Example/ValueTrackingSliderTests/ValueTrackingSliderTests-Info.plist': The file “ValueTrackingSliderTests-Info.plist” couldn’t be opened because there is no such file.`` The same when i download the Project as zip and try to build the example project.

    Cheers

    opened by BanditsBacon 6
  • Crash in iOS8. [__NSCFType CGColor]: unrecognized selector

    Crash in iOS8. [__NSCFType CGColor]: unrecognized selector

    I seem to have an app which is crashing with ASValueTrackingSlider. Setting the class of the slider to UISlider, it runs fine.

    This is the error given during runtime:

    "-[__NSCFType CGColor]: unrecognized selector sent to instance 0x12345678"

    The instance is just a sample, that hex value changes every time.

    Help?

    opened by pranavt 6
  • CALayerInvalidGeometry

    CALayerInvalidGeometry

    Hi @alskipp,

    Following the 0.9.1 update, I start to experience crash. Here is the output:

    
    2014-05-08 16:56:34.278 TSA[12501:60b] *** Terminating app due to uncaught exception 'CALayerInvalidGeometry', reason: 'CALayer position contains NaN: [nan 0]'
    *** First throw call stack:
    (
        0   CoreFoundation                      0x00000001031de495 __exceptionPreprocess + 165
        1   libobjc.A.dylib                     0x0000000102db599e objc_exception_throw + 43
        2   CoreFoundation                      0x00000001031de2ad +[NSException raise:format:] + 205
        3   QuartzCore                          0x0000000101647cf6 _ZN2CA5Layer12set_positionERKNS_4Vec2IdEEb + 158
        4   QuartzCore                          0x0000000101647e77 -[CALayer setPosition:] + 44
        5   QuartzCore                          0x0000000101648544 -[CALayer setFrame:] + 856
        6   TSA                                 0x000000010010c36c -[ASValuePopUpView setArrowCenterOffset:] + 700
        7   TSA                                 0x000000010010fe00 -[ASValueTrackingSlider adjustPopUpViewFrame] + 688
        8   TSA                                 0x000000010010fa0b -[ASValueTrackingSlider positionAndUpdatePopUpView] + 43
        9   TSA                                 0x000000010010f8de -[ASValueTrackingSlider setup] + 1070
        10  TSA                                 0x000000010010e5e0 -[ASValueTrackingSlider initWithCoder:] + 160
        11  UIKit                               0x0000000101b4359c -[UIClassSwapper initWithCoder:] + 202
        12  UIKit                               0x0000000101c7f794 UINibDecoderDecodeObjectForValue + 678
        13  UIKit                               0x0000000101c7f95c UINibDecoderDecodeObjectForValue + 1134
        14  UIKit                               0x0000000101c7f4df -[UINibDecoder decodeObjectForKey:] + 94
        15  UIKit                               0x000000010192f956 -[UIView initWithCoder:] + 815
        16  UIKit                               0x0000000101c7f794 UINibDecoderDecodeObjectForValue + 678
        17  UIKit                               0x0000000101c7f95c UINibDecoderDecodeObjectForValue + 1134
        18  UIKit                               0x0000000101c7f4df -[UINibDecoder decodeObjectForKey:] + 94
        19  UIKit                               0x000000010192f956 -[UIView initWithCoder:] + 815
        20  UIKit                               0x0000000101b078a2 -[UITableViewCell initWithCoder:] + 68
        21  UIKit                               0x0000000101b4359c -[UIClassSwapper initWithCoder:] + 202
        22  UIKit                               0x0000000101c7f794 UINibDecoderDecodeObjectForValue + 678
        23  UIKit                               0x0000000101c7f4df -[UINibDecoder decodeObjectForKey:] + 94
        24  UIKit                               0x0000000101b4316c -[UIRuntimeConnection initWithCoder:] + 109
        25  UIKit                               0x0000000101c7f794 UINibDecoderDecodeObjectForValue + 678
        26  UIKit                               0x0000000101c7f95c UINibDecoderDecodeObjectForValue + 1134
        27  UIKit                               0x0000000101c7f4df -[UINibDecoder decodeObjectForKey:] + 94
        28  UIKit                               0x0000000101b427b6 -[UINib instantiateWithOwner:options:] + 891
        29  UIKit                               0x00000001019b144b -[UITableView _dequeueReusableViewOfType:withIdentifier:] + 302
        30  UIKit                               0x00000001019b16b6 -[UITableView dequeueReusableCellWithIdentifier:forIndexPath:] + 44
        31  TSA                                 0x0000000100033984 -[DetailTableViewController tableView:cellForRowAtIndexPath:] + 7876
        32  UIKit                               0x00000001019bbf8a -[UITableView _createPreparedCellForGlobalRow:withIndexPath:] + 348
        33  UIKit                               0x00000001019a1d5b -[UITableView _updateVisibleCellsNow:] + 2337
        34  UIKit                               0x00000001019b3721 -[UITableView layoutSubviews] + 207
        35  UIKit                               0x0000000101947993 -[UIView(CALayerDelegate) layoutSublayersOfLayer:] + 354
        36  QuartzCore                          0x0000000101650802 -[CALayer layoutSublayers] + 151
        37  QuartzCore                          0x0000000101645369 _ZN2CA5Layer16layout_if_neededEPNS_11TransactionE + 363
        38  QuartzCore                          0x00000001016451ea _ZN2CA5Layer28layout_and_display_if_neededEPNS_11TransactionE + 24
        39  QuartzCore                          0x00000001015b8fb8 _ZN2CA7Context18commit_transactionEPNS_11TransactionE + 252
        40  QuartzCore                          0x00000001015ba030 _ZN2CA11Transaction6commitEv + 394
        41  QuartzCore                          0x00000001015ba69d _ZN2CA11Transaction17observer_callbackEP19__CFRunLoopObservermPv + 89
        42  CoreFoundation                      0x00000001031a9dc7 __CFRUNLOOP_IS_CALLING_OUT_TO_AN_OBSERVER_CALLBACK_FUNCTION__ + 23
        43  CoreFoundation                      0x00000001031a9d37 __CFRunLoopDoObservers + 391
        44  CoreFoundation                      0x0000000103189522 __CFRunLoopRun + 946
        45  CoreFoundation                      0x0000000103188d83 CFRunLoopRunSpecific + 467
        46  GraphicsServices                    0x0000000104becf04 GSEventRunModal + 161
        47  UIKit                               0x00000001018e7e33 UIApplicationMain + 1010
        48  TSA                                 0x000000010002ac33 main + 115
        49  libdyld.dylib                       0x00000001037635fd start + 1
        50  ???                                 0x0000000000000001 0x0 + 1
    )
    libc++abi.dylib: terminating with uncaught exception of type NSException
    
    

    Do you have any idea of what's going on?

    It is currently working fine with 0.9.0

    opened by aybar 5
  • Updated Cocoapod soon?

    Updated Cocoapod soon?

    Looking at ASValuePopUpView.h on master you have the a property that I need to update the arrow length:

    @interface ASValuePopUpView : UIView
    
    @property (nonatomic) CGFloat arrowLength;
    

    However, using the latest Cocoapod, 0.10.1 (which points to tag 0.10.1), this property doesn't exist. Is there a plan to roll out this change in an updated Cocoapod soon?

    Thanks!

    opened by rbaumbach 3
  • Cannot adjust popup size

    Cannot adjust popup size

    The slider popup looks weird with custom fonts (e.g. small Roboto fonts). There should be a way (without modifying the source) to specify the size of the popup view, maybe by allowing clients to customize width/height padding factors.

    opened by LeeroyDing 3
  • Keep the PopUpView always visible

    Keep the PopUpView always visible

    Hi,

    First of all, thanks for such useful lib :)

    I wonder if there's a way to always keep the slider's popUpView visible (by default, it gets hidden once you stop interacting with the slider).

    Thanks, Matheus

    opened by matheusmaaz 3
  • Improved control of popupview dimensions

    Improved control of popupview dimensions

    First of all, thank you very much for sharing this class! I've been looking for something like this for a while, but all solutions I came across were pretty outdated.

    Anyway, I'm using a pretty small font (size 12) for the text in the popUpView, and the relative size IMO of the popUpView is too big for that. I was able to tweak it by decreasing the values of ARROW_LENGTH and MIN_POPUPVIEW_HEIGHT, and it looks much better proportionally. Is this maybe something that could be built in the class, eg by making those constants a property, or size them based on the font size?

    opened by koenvanderdrift 3
  • Issue when sliding from a long string to a shorter one

    Issue when sliding from a long string to a shorter one

    When using custom strings with different lengths in popUpView label, if you slide from a long string to a shorter string, the long string remains appearing a bit while target popupview size is already drawn. It can be seen in your demo project.

    opened by Deub27 3
  • String instead of Number like in ASProgressPopUpView

    String instead of Number like in ASProgressPopUpView

    Hello,

    you have an option in your other project "ASProgressPopUpView" to write a string instead of a formatted number value. Is it possible to add this option to the "ASValueTrackingSlider" too?

    Example from "ASProgressPopUpView":

    • (NSString *)progressView:(ASProgressPopUpView *)progressView stringForProgress:(float)progress { NSString *s; if (progress < 0.2) { s = @"Just starting"; } else if (progress > 0.4 && progress < 0.6) { s = @"About halfway"; } else if (progress > 0.75 && progress < 1.0) { s = @"Nearly there"; } else if (progress >= 1.0) { s = @"Complete"; } return s; }

    Thanks! Kenan.

    enhancement 
    opened by appicus 3
  • Popup off center on min and max value

    Popup off center on min and max value

    Hi,

    Currently when setting the slider to the min value or max value, the frame of the popup is adjusted to fit in bounds of the slider and therefore is rendered off center in regards to the thumb.

    Could you look into a way to disable the adjustment? My design requirements need to have this popup aligned with the thumb on these values.

    Thanks for your work on this lib.

    opened by mkoorn 0
  • Difficult to slide the exact value

    Difficult to slide the exact value

    Hi, First I like ASValueTrackingSlider.

    But Its very difficult to drag slider to exact value example I want to set value to 15.00 value, for ASValueTrackingSlider 0.00 - 100.00 value its take lot of time to reach set 15.00 value.

    opened by arishanapalli 1
  • Multiple line popup text implicit animations

    Multiple line popup text implicit animations

    If you return multiple line string with line brake "\n" in delegate, popup view will have implicit animations.

    To fix it, modify line 93 in ASValuePopUpView.m _textLayer.actions = @{@"contents" : [NSNull null],@"bounds" : [NSNull null]};

    opened by jack0502801 0
  •  Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[ASValueTrackingSlider name]: unrecognized selector sent to instance 0x10218d2a0'

    Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[ASValueTrackingSlider name]: unrecognized selector sent to instance 0x10218d2a0'

    Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[ASValueTrackingSlider name]: unrecognized selector sent to instance 0x10218d2a0'

    opened by Jaypixster 1
Releases(0.12.1)
Owner
Al Skipp
Al Skipp
A slider, similar in style to UISlider, but which allows you to pick a minimum and maximum range.

TTRangeSlider A slider, similar in style to UISlider, but which allows you to pick a minimum and maximum range. Installation TTRangeSlider is availabl

Tom Thorpe 952 Dec 2, 2022
StepSlider its custom implementation of slider such as UISlider for preset integer values.

StepSlider StepSlider its custom implementation of slider such as UISlider for preset values. Behind the scenes StepSlider manipulate integer indexes.

spromicky 520 Dec 20, 2022
RangeSeedSlider provides a customizable range slider like a UISlider.

RangeSeekSlider Overview RangeSeekSlider provides a customizable range slider like a UISlider. This library is based on TomThorpe/TTRangeSlider (Objec

WorldDownTown 644 Dec 12, 2022
UISlider clone with multiple thumbs and values, range highlight, optional snap intervals, optional value labels, either vertical or horizontal.

MultiSlider UISlider clone with multiple thumbs and values, range highlight, optional snap intervals, optional value labels, either vertical or horizo

Yonat Sharon 326 Dec 29, 2022
PhotoSlider is a simple photo slider and can delete slider with swiping.

PhotoSlider is a simple photo slider and can delete slider with swiping.

Daichi Nakajima 247 Nov 30, 2022
A custom reusable slider control with 2 thumbs (range slider).

MARKRangeSlider A custom reusable slider control with 2 thumbs (range slider). Values range is between minimumValue and maximumValue (from 0 to 1 by d

Vadym Markov 181 Nov 21, 2022
🎚️ STDiscreteSlider – slider which allows user to choose value only from predefined set of data.

STDiscreteSlider – slider which allows user to choose value only from predefined set of data. Slider may receive any types of options, you may pass set of integers or strings, or any other type. Written using SwiftUI.

Tamerlan Satualdypov 15 Apr 3, 2022
A reusable Slider View made with SwiftUI

ZSlider A reusable Slider View made with SwiftUI. Installation: Minimum version iOS 13 In Xcode go to File -> Swift Packages -> Add Package Dependency

null 7 Dec 15, 2022
Dragger - A Customizable Drag Slider swiftUI view

Dragger A customizable SwiftUI Dragger view. Installation In Xcode add https://g

Kiefer Wiessler 4 Dec 19, 2022
Custom & highly configurable seek slider with sliding intervals, disabled state and every possible setting to tackle!

iLabeledSeekSlider Custom & highly configurable seek slider with sliding intervals, disabled state and every possible setting to tackle! Minimum iOS v

Edgar Žigis 9 Aug 16, 2022
TriggerSlider is a simple SwiftUI trigger slider

TriggerSlider is a simple SwiftUI trigger slider which can be used instead of a button, e.g. in a situation where the

Dominik Butz 4 Dec 16, 2022
This is an iOS Tweak that modifies the brightness slider in the Control Center.

AdvancedBrightnessSlider Tweak This is an iOS Tweak that modifies the brightness slider in the Control Center. Even with dark mode toggled on, I found

Jonas Schiefner 18 Jan 5, 2023
Use UIResponder to imitate an iOS slider.

WWSlider Use UIResponder to imitate an iOS slider. 使用UIResponder仿造一個iOS的滑桿. Installation with Swift Package Manager dependencies: [ .package(url:

William-Weng 2 May 5, 2022
VolumeControl is a custom volume control for iPhone featuring a well-designed round slider.

#VolumeControl VolumeControl is a custom volume control for iPhone featuring a well-designed round slider. Preview Usage // Include VolumeControl.h in

12Rockets 81 Oct 11, 2022
Simple and light weight slider with chapter management

Simple and light weight slider with chapter management Demo Installation CocoaPods WESlider is available through CocoaPods. To install it, simply add

Lucas Ortis 89 Nov 29, 2022
IntervalSlider is a slider library like ReutersTV app. written in pure swift.

IntervalSlider Description and appetize.io`s DEMO To run the example project, clone the repo, and run pod install from the Example directory first. Re

Nobuyasu 65 May 23, 2021
A simple range slider made in Swift

RangeSlider Summary A simple range slider made in Swift. Screenshot Use This control is IBDesignable and uses the target-action pattern for change not

William Archimede 305 Nov 29, 2022
CircleSlider is a Circular slider library. written in pure Swift.

CircleSlider Description and appetize.io`s DEMO Usage To run the example project, clone the repo, and run pod install from the Example directory first

Nobuyasu 142 May 9, 2022
Customizable animated slider for iOS

MMSegmentSlider MMSegmentSlider is an easy-to-use IBDesignable animated slider for iOS 7+ written in Objective-C. Installation From CocoaPods CocoaPod

Max Medvedev 48 Jul 26, 2022