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

Related tags

Slider TTRangeSlider
Overview

TTRangeSlider

Build Status Version License Platform

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

Screenshot

Installation

TTRangeSlider is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod "TTRangeSlider"

Note that this control uses IB_DESIGNABLE, so for it to work well and not get warnings in Interface Builder, you should use the latest version of CocoaPods, and add the use_frameworks! line. So your podfile may look something like

source 'https://github.com/CocoaPods/Specs.git'
use_frameworks!

pod “TTRangeSlider”

Usage

Add the TTRangeSlider like you would with any other UIControl. Either:

  • Add a view in your storyboard/class and change it’s type to TTRangeSlider. As long as you’re using >= XCode6 you can now use this control like any other, you can set all the properties in the Attributes Inspector and see a live preview:

Interface Builder Screenshot

or

  • Create the TTRangeSlider in code using [TTRangeSlider alloc] init] then add it as a subview to your code and set the relevant autolayout properties or frame.

The default slider ranges from 0->100 and has 10 preselected as the minimum, and 90 as the maximum.

Values that the user has selected are exposed using the selectedMinimum and selectedMaximum properties. You can also use these properties to change the selected values programatically if you wish.

Getting updates

To be notified when the slider’s value changes, register your action method with the UIControlEventValueChanged event. At runtime, the slider calls your method in response to the user changing the slider’s value.

Alternatively you can implement the TTRangeSliderDelegate protocol and respond to changes in the rangeSlider:didChangeSelectedMinimumValue:andMaximumValue: method.

Other customisation of the control is done using the following properties:

tintColor

The tintColor property (which you can also set in Interface Builder) sets the overall colour of the control, including the colour of the line, the two handles, and the labels.

It is safe to change the tintColor at any time, if the control is currently visible the colour change will be animated into the new colour.

tintColorBetweenHandles

The tintColorBetweenHandles property sets the color of the line between the two handles.

minValue

The minimum possible value to select in the range

maxValue

The maximum possible value to select in the range

selectedMinimum

The preselected minumum value (note: This should be less than the selectedMaximum)

selectedMaximum

The preselected maximum value (note: This should be greater than the selectedMinimum)

numberFormatterOverride

Each handle in the slider has a label above it showing the current selected value. By default, this is displayed as a decimal format.

You can override this default here by supplying your own NSNumberFormatter. For example, you could supply an NSNumberFormatter that has a currency style, or a prefix or suffix.

If this property is nil, the default decimal format will be used. Note: If you want no labels at all, set this value to be (NSNumberFormatter *)[NSNull null] (as opposed to nil), to specifically mark that you want no labels

hideLabels

When set to YES the labels above the slider controls will be hidden. Default is NO.

minDistance

The minimum distance the two selected slider values must be apart. -1 for no minimum. Default is -1.

maxDistance

The maximum distance the two selected slider values must be apart. -1 for no maximum. Default is -1.

minLabelColour

The colour of the minimum value text label. If not set, the default is the tintColor.

maxLabelColour

The colour of the maximum value text label. If not set, the default is the tintColor.

disableRange

If true, the control will mimic a normal slider and have only one handle rather than a range.

In this case, the selectedMinValue will be not functional anymore. Use selectedMaxValue instead to determine the value the user has selected.

enableStep

If true the control will snap to point at each step (property) between minValue and maxValue. Default value is disabled.

step

If enableStep is true, this controls the value of each step. E.g. if this value is 20, the control will snap to values 20,40,60...etc. Set this is you enable the enableStep property.

handleImage

If set the image passed will be used for the handles.

handleColor

If set it will update the color of the handles. Default is tintColor.

handleDiameter

If set it will update the size of the handles. Default is 16.0.

selectedHandleDiameterMultiplier

If set it update the scaling factor of the handle when selected. Default is 1.7. If you don't want any scaling, set it to 1.0.

lineHeight

Set the height of the line. It will automatically round the corners. If not specified, the default value will be 1.0.

lineBorderWidth

Sets an optional border on the outer lines (not the line inside the range) of the slider. Default is 0.

lineBorderColor

If lineBorderWidth, set the colour of the line here.

handleBorderColor

If set it will update the color of the handle borders. Default is tintColor.

handleBorderWidth

If set it will update the size of the handle borders. Default is 0.0

labelPadding

If set it will update the size of the padding between label and handle. Default is 8.0

Author

Tom Thorpe

License

TTRangeSlider is available under the MIT license. See the LICENSE file for more info.

Comments
  • Wrong font on iOS 13

    Wrong font on iOS 13

    Hi,

    There is a small issue on iOS 13 GM: The font of the min/max labels seems to be set to Times New Roman instead of the system default one, San Francisco.

    iOS 12: ios-12

    iOS 13: ios-13

    Using rangeSlider.minLabelFont or rangeSlider.maxLabelFont has no effect.

    Also, the console prints the following message:

    CoreText performance note: Client called CTFontCreateWithName() using name ".SFUI-Regular" and got font with PostScript name "TimesNewRomanPSMT". For best performance, only use PostScript names when calling this API.
    CoreText performance note: Set a breakpoint on CTFontLogSuboptimalRequest to debug.
    

    Thank you.

    opened by tdimeco 8
  • maxDistance and minDistance

    maxDistance and minDistance

    • main change add the minDistance and maxDistance to keep the distance between two point.
    • other change
      • move the minLabel, maxLabel to public (I think some people need to change the font or size etc.)
      • move the leftHandleSelected, rightHandleSelected to public (need the property to check the value change by user's touch or not)
      • move the leftHandle, rightHandle to public
    opened by finalevil 8
  • Add custom feature, now we can use custom color or image to customize handle and also add slider line between min and max

    Add custom feature, now we can use custom color or image to customize handle and also add slider line between min and max

    • Add Slider distLine Between min and max
    • Add Slider distLine custom color (Now we can custom color between min and max sliderLine)
    • Add custom handle with image
    • Add custom handle with custom color
    • Modification example, adding two new features
    opened by fiantinangon 7
  • A text label versus number format for values displayed above min/max value

    A text label versus number format for values displayed above min/max value

    It would be nice to be able to display a text label over the min/max value based upon that value.

    example one: if min range value is < 10 but > 5 "a small value" but > 10 "a bigger value"

    example two: # of seconds to display the time above the slider's min/max value

    So generally a text label that uses the numeric value to calculate something a bit more complex than numeric format.

    opened by MarcCJohnson 5
  • Accessing text labels

    Accessing text labels

    Hello,

    I'm using your library, it's awesome and fits all my needs. I wanted to ask is there any possibility to access text label in order to change text?

    One more note, I'm using slider via bridging header and swift.

    opened by vadimkrutovlv 4
  • Label positions problem

    Label positions problem

    If a range between selectedMinimum and selectedMaximum is very small, labels position are incorrect. This situation happened when I have created cell from a nib with TTRangeSlider with my own minValue, maxValue, selectedMinimum and selectedMaximum. But if the range between selectedMinimum and selectedMaximum are bigger, all is correct.

    incorrect correct

    bug 
    opened by krychlinski 4
  • Added SPM Support

    Added SPM Support

    This is a really simple library, so adding Swift Package Manager support is really easy even though it's all ObjC.

    If you merge this in, all you need to do is create a tag for each release (which you do for Cocoapods anyway) and SPM handles the rest. Don't need to publish anywhere else.

    opened by Vortec4800 3
  • Added UI customisations

    Added UI customisations

    Hello to everybody.

    In this PR I have:

    • added all the customisation proposed and never merged of PR #16
    • implemented the feedback of PR #16 (mainly improving names)
    • added the lineHeight optional property (with rounded corners)
    • added the handleDiameter optional property
    • added the selectedHandleDiameterMultiplier optional property
    • added the tintColorBetweenHandles optional property
    • updated the demo
    • updated the documentation

    I am sure this customisation will be useful to other devs, so I hope it can be merged. I will be waiting for your feedback.

    Thanks!

    opened by ClaudioTSM 3
  • Would like to add a flag to hide the labels above the slider controls…

    Would like to add a flag to hide the labels above the slider controls…

    …. Why? Two main reasons:

    1. I think this makes for a cleaner API. The work-around mentioned in the header seems overly complicated and doesn't work well with Swift. It might be possible with Swift, but I was unable to downcast an NSNull or AnyObject to NSNumberFormatter and get back an NSNull in Obj-C. I was only ever able to get a nil which the other sort of unclear use-case in the API. If you set this property to nil you get no formatter style. Anyway ... I just wanted to turn off the labels. Seems to me a flag would be a much cleaner way to go about it.
    2. I didn't need labels animated and following the thumb controls for my purposes. I would assume others don't either.

    What I've done:

    • Added a new IBInspectable flag named hideLabels which by default is set to NO. Setting it to YES or true will hide them. I've made sure that updating this property while building the UI will correctly update the Storyboard/XIB. Updated the comment in the header.
    • Maintained backward compatibility with the aforementioned label hiding rules so older consumers of this API don't break. I would also be in favor of removing the old behavior and making this a breaking change ... but that's probably not my call :-)/
    • Updated the Storyboard to include an example without the labels. Though I didn't bother fixing AutoLayout problems. Perhaps I should?
    • Updated the readme.
    opened by chefnobody 3
  • Install through cocoapods will not have minDistance/maxDistance/step options

    Install through cocoapods will not have minDistance/maxDistance/step options

    Install through cocoapod will not have minDistance/maxDistance options. But the cocapods indicated the installed version is 1.0.2. It seems that the files from cocoapods are not same as the github. Please advise it. Thanks

    opened by DesmondPang 3
  • TTRangeSliderDelegate It not Working

    TTRangeSliderDelegate It not Working

    How to get Min Max Value at the Sliding time please help me I have to try this by using below code but it's never called...

    public func rangeSlider(_ sender: TTRangeSlider!, didChangeSelectedMinimumValue selectedMinimum: Float, andMaximumValue selectedMaximum: Float) {
    print(selectedMinimum)
    print(selectedMaximum)
    // updateLabelsValues(selectedMinimum, max: selectedMaximum)
    }
    

    And I have Also Extent my class by TTRangeSliderDelegate

    Thanks in Advance.

    opened by erishiraj 2
  • Overriding Selected Minimum/Maximum labels.

    Overriding Selected Minimum/Maximum labels.

    I added another optional method to the protocol that allows the user to override labels based upon the float values.

    My use case was to show a timestamp based upon the current second of the day and timestamp increase/decrease as the user slides either slider up or down.

    Once the method is implemented the user has full control as to how to convert the float or can ignore it and just pass the value through.

    I added an example of usage in the demo.

    opened by MarcCJohnson 0
  • fix handle jump when first move

    fix handle jump when first move

    https://user-images.githubusercontent.com/15604758/131783017-5c354fbb-fddc-49d2-83f3-50b155b0c1f7.mov

    When I first click on one side of the slider and then move, there will be a jump in position.

    opened by JasonLxj 1
  • Added the ability to set an image for both handles

    Added the ability to set an image for both handles

    This gives users the ability to set separate handle images on the range slider. If they do not want to use this, they can still use handleImage to set a master image for both handles, or set no image at all.

    opened by townsendeb 0
  • CoreText note

    CoreText note

    CoreText note: Client requested name ".SFUI-Regular", it will get TimesNewRomanPSMT rather than the intended font. All system UI font access should be through proper APIs such as CTFontCreateUIFontForLanguage() or +[UIFont systemFontOfSize:].

    opened by GarthGit 3
  • How to set the Track image in it.

    How to set the Track image in it.

    Hi, its an great slider with almost all feature and its working fine in tableview as well, i have requirement to add the track image so how could we do that, please let me know.

    opened by swapneshp-spaceo 0
  • selected Minimum and Maximum not set programatically

    selected Minimum and Maximum not set programatically

    Hi team, I am trying to set selected minimum and maximum valve programatically. but it's not working. Values provided in storyboard works but not programatically.

    opened by ghost 1
Releases(v1.0.7)
  • v1.0.7(Jan 26, 2021)

  • v1.0.6(Apr 14, 2018)

    Included Changes:

    #73 - Add border color properties for slider line #71 - add label position option : Above or Below #68 - Fix mistake in README #63 - Send UIControlEventValueChanged #60 - Adds accessibility support for incrementing/decrementing slider. #58 - Fixing minLabel does not reappear after re-enabling range.

    Source code(tar.gz)
    Source code(zip)
  • v1.0.5(Nov 27, 2016)

  • v1.0.4(May 25, 2016)

    New

    • Added new hideLabels property to hide the labels on the slider. Previously the suggestion was to set the formatter override to [NSNull null]. This was bad. Especially for Swift. Now you should set hideLabels to true instead. The old method will work for now too though. (thanks Aaron Connolly!)
    • Added custom handle image or custom handle colour - handleColor and handleImage properties (thanks fiantinangon and ClaudioTSM!)
    • Added custom line colour for the slider line - sliderColorBetweenHandles (thanks fiantinangon and ClaudioTSM!)
    • Added custom line height for the slider line - lineHeight (thanks ClaudioTSM!)
    • Added custom handle diameter for the size of the slider handles - handleDiameter (thanks ClaudioTSM!)
    • Added property to control how much the handle zooms by when it is selected by the user - electedHandleDiameterMultiplier (thanks ClaudioTSM!)
    • Added new delegate method didEndTouchesInRangeSlider (thanks andreyvit!)
    • Added new delegate method didStartTouchesInRangeSlider (thanks holgersindbaek!)
    • Made the delegate property an IBOutlet (thanks felipowsky!)
    • Added minLabelFont and maxLabelFont properties to change the fonts of the labels (thanks codiophile!)

    Fixed Bugs

    • Do not try to prevent labels overlap when disableRange == YES - Without this fix, the maxLabel would not go all the way to the left due to the minLabel being accounted for even if hidden. (thanks JonathanTron!)
    • Fixed label spacing bug from #2 (thanks krychlinski for reporting and relevante for the fix!)
    • Fixes a problem where TTRangeSlider would not always inherit the tintColor of the parent view when using Interface Builder (see #25 for details - thanks guillaume-algis!). Related: tintColor is only respected if a custom handleColor has not been set (thanks felipowsky!)
    Source code(tar.gz)
    Source code(zip)
  • 1.0.3(Aug 7, 2015)

    Adds a few new properties like maxDistance and minDistance, fixes bug in delegate notification (see f17eccb44077a575d23e7a63d606338ec8f4a689)

    Source code(tar.gz)
    Source code(zip)
  • 1.0.2(Apr 1, 2015)

  • 1.0.1(Apr 1, 2015)

    Fixing a small bug with the default selected values possibly being out of range of the minimum and maximum if you changes the minimum and maximum, but not the default selected values.

    Source code(tar.gz)
    Source code(zip)
Owner
Tom Thorpe
Tom Thorpe
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
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
A UISlider subclass that displays the slider value in a popup view

ASValueTrackingSlider ###What is it? A UISlider subclass that displays live values in an easy to customize popup view. ![screenshot] (http://alskipp.g

Al Skipp 1.8k Dec 16, 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
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
🎚️ 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
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
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
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
A powerful Circular Slider. It's written in Swift, it's 100% IBDesignable and all parameters are IBInspectable.

CircularSlider A powerful Circular Slider. It's written in Swift, it's 100% IBDesignable and all parameters are IBInspectable. Demo Installation Circu

Matteo Tagliafico 253 Sep 19, 2022
VerticalSlider - An animatable and customizable vertical slider written in Swift 4

VerticalSlider An animatable and customizable vertical slider written in Swift 4. Quick Start VerticalSliderPlayground Clone Repo Open VSVerticalSlide

Vincent Smithers 13 Apr 26, 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
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
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
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