RangeSeedSlider provides a customizable range slider like a UISlider.

Overview

RangeSeekSlider

Join the chat at https://gitter.im/WorldDownTown/RangeSeekSlider

License Language Carthage compatible CocoaPods compatible Downloads with CocoaPods Awesome

Overview

RangeSeekSlider provides a customizable range slider like a UISlider. This library is based on TomThorpe/TTRangeSlider (Objective-C) and made with Swift.

demo

Demo

You can try on Appetize.io

or

Build Xcode project.

  1. Open RangeSeekSlider.xcodeproj.
  2. Change Scheme to RangeSeekSliderDemo
  3. Run

Usage

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

  • Add a view in your storyboard/xib and change its Class and Module to RangeSeekSlider. You can set all the properties in the Attributes Inspector and see a live preview:

Interface Builder Module Screenshot

Interface Builder Screenshot

or

  • Create the RangeSeekSlider in code using RangeSeekSlider() then add it as a subview to your code and set the relevant autolayout properties or frame.

The default slider ranges from 0.0 -> 100.0 and has 10.0 preselected as the minimum, and 90.0 as the maximum.

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

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 color of the control, including the color 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 color change will be animated into the new color.

minValue

The minimum possible value to select in the range

maxValue

The maximum possible value to select in the range

selectedMinValue

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

selectedMaxValue

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

minLabelFont

The font of the minimum value text label. If not set, the default is system font size 12.0.

maxLabelFont

The font of the maximum value text label. If not set, the default is system font size 12.0.

numberFormatter

Each handle in the slider has a label above it showing the current selected value. If you change number format, update each properties of NumberFormatter. By default, this is displayed as a decimal format.

hideLabels

When set to true the labels above the slider controls will be hidden. Default is false.

labelsFixed

Fixes the labels above the slider controls. If true, labels will be fixed to both ends. Otherwise labels will move with the handles. Default is false.

minDistance

The minimum distance the two selected slider values must be apart. Default is 0.0.

maxDistance

The maximum distance the two selected slider values must be apart. Default is CGFloat.greatestFiniteMagnitude.

minLabelColor

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

maxLabelColor

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

handleColor

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

colorBetweenHandles

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

handleBorderColor

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

initialColor

The color of the entire slider when the handle is set to the minimum value and the maximum value. Default is nil.

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.

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.

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

minLabelAccessibilityLabel

The label displayed in accessibility mode for minimum value handler. If not set, the default is empty String.

maxLabelAccessibilityLabel

The label displayed in accessibility mode for maximum value handler. If not set, the default is empty String.

minLabelAccessibilityHint

The brief description displayed in accessibility mode for minimum value handler. If not set, the default is empty String.

maxLabelAccessibilityHint

The brief description displayed in accessibility mode for maximum value handler. If not set, the default is empty String.

func setupStyle()

When subclassing RangeSeekSlider and setting each item in setupStyle(), the design is reflected in Interface Builder as well. setup_style.gif

Requirements

  • Swift 3.0+
  • iOS 9.0+

Installation

Carthage

RangeSeekSlider is available through Carthage. To install it, simply add the following line to your Cartfile:

github "WorldDownTown/RangeSeekSlider"

⚠️ Warning ⚠️

When installed with Carthage, @IBDesignable can't be available (Carthage Issue). But we have a workaround is shown in Stack Overflow. It is able to use @IBDesignable by subclassing RangeSeekSlider.

@IBDesignable class CustomRangeSeekSlider: RangeSeekSlider {}

CocoaPods

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

pod 'RangeSeekSlider'

Manually

Download and drop RangeSeekSlider/Sources folder in your project.

Author

WorldDownTown, [email protected]

License

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

Comments
  • Change the selected value programmatically

    Change the selected value programmatically

    New Issue Checklist

    • [x] Updated RangeSeekSlider to the latest version
    • [x] Checked Gitter

    Issue Description

    I think this is more of a feature request than an issue.

    I noticed that you can't programmatically change the min and max values after they've been set initially. It'll be nice if there is an option to do that.

    I'm adding a demo project here just in case. It has a slider with min value being 0 and max value is 5. I set the min to 1 and max to 3 in the viewDidLoad and it appears in the slider correctly.

    Then I'm trying to change them to 2 and 4 upon a button tap but nothing's happening.

    Demo project

    opened by Isuru-Nanayakkara 14
  • Min label visible after setting *disableRange*

    Min label visible after setting *disableRange*

    New Issue Checklist

    • [x] Updated RangeSeekSlider to the latest version
    • [x] Checked Gitter

    Issue Description

    After setting the disableRange to true, minLabel still shows up. I guess the following line (469):

            minLabel.isHidden = hideLabels
    

    Should read:

            minLabel.isHidden = hideLabels || disableRange
    

    Let me know if that's the fix or I am using it wrong and I'll send a PR.

    Thank you, H.

    Environment

    opened by hernangonzalez 4
  • Missing CFBundleVersion

    Missing CFBundleVersion

    New Issue Checklist

    • [x] Updated RangeSeekSlider to the latest version
    • [ ] Checked Gitter

    Issue Description

    After adding this framework to our application, we are getting the following error when uploading to iTunes Connect (TestFlight beta):

    [11:13:20]: [Transporter Error Output]: ERROR ITMS-90056: "This bundle Payload/XXXX.app/Frameworks/RangeSeekSlider.framework is invalid. The Info.plist file is missing the required key: CFBundleVersion."
    [11:13:20]: Transporter transfer failed.
    [11:13:20]: 
    [11:13:20]: ERROR ITMS-90056: "This bundle Payload/XXXX.app/Frameworks/RangeSeekSlider.framework is invalid. The Info.plist file is missing the required key: CFBundleVersion."
    

    Environment

    • Library version 1.7.0
    • iOS version 10-11
    • Swift version 4

    Framework was installed via Carthage, adding the following to our Cartfile:

    # Used for time sliders
    github "WorldDownTown/RangeSeekSlider"
    
    opened by eneko 3
  • Please update master Cocoapod repository.

    Please update master Cocoapod repository.

    New Issue Checklist

    • [x] Updated RangeSeekSlider to the latest version
    • [x] Checked Gitter

    Issue Description

    Latest version on Cocoapods is 1.5.0. https://github.com/CocoaPods/Specs/tree/d69f13d37c9af9b99757ac6379b0c55aea78beb1/Specs/6/4/d/RangeSeekSlider

    Could you please update with latest changes?

    Thank you.

    opened by hernangonzalez 3
  • Feature Request-  update slider by Textfields Input (vice versa)

    Feature Request- update slider by Textfields Input (vice versa)

    New Issue Checklist

    • [ ] update slider by Textfields Input
    • [ ] update textfields by update slider

    Issue Description

    insert min and max value in textField to update range slide, and if slide value is changed textfields should also updated

    • iOS 14
    • Swift 5
    opened by naveedmcs 1
  • Typo in ReadMe

    Typo in ReadMe

    New Issue Checklist

    • [x] Updated RangeSeekSlider to the latest version
    • [x] Checked Gitter

    Issue Description

    the example code in Carthage section:

    @IBDesignable class CustomRangeSeekSlider: RangeSeedSlider {}

    should be

    @IBDesignable class CustomRangeSeekSlider: RangeSeekSlider {}

    opened by aalenliang 1
  • Handle border width & color not working

    Handle border width & color not working

    New Issue Checklist

    • [x] Updated RangeSeekSlider to the latest version
    • [x] Checked Gitter

    Issue Description

    Setting handle border and color has no effect. Looks like its property is not even used in the code.

    Environment

    Just define a value for the border properties other than the color used for the handle itself.

    opened by hernangonzalez 0
  • Handles overlapping

    Handles overlapping

    While using long values for min & max this kind of overlapping issues will acquire. Example min = 0 and max = 100 means both handlers are overlapping while come together.

    Attached screenshot for your reference, please check and do the needful thanks.

    [ENVIRONMENT]

    • Xcode version - 14.0
    • iOS version - 16.0
    • Swift version - 5.0

    Filter_issue

    opened by HariVijay44 0
  • Issue in Swipe to increase and decrease with thumb

    Issue in Swipe to increase and decrease with thumb

    Issue Description

    Hello

    https://user-images.githubusercontent.com/65901824/183346427-f5ecc07d-6158-43e5-8471-e68357ed8852.mp4

    I integrated Range seek slider for price range but it will take time to increase decrease value while we swipe with thumb (working fine in demo). I attached a sample video in same thread. please check once and let me know if anything more you want for reference.

    Thanks and regards Deepak Kumar

    Environment

    opened by Deepak-kumar-varshney 1
  • On max label colour changes to the blue

    On max label colour changes to the blue

    Issue Description

    When we set the min slider value to 0 and max slider value to max the label color changes. And there is no method or variable to the colour to black on max reach

    Environment

    opened by vijay12345678910 0
Releases(1.8.0)
Owner
WorldDownTown
🍺👨‍💻🍺
WorldDownTown
A custom UIControl which functions like UISlider where you can set multiple intervals with different step values for each interval.

MultiStepSlider A custom UIControl which functions like UISlider where you can set multiple intervals with different step values for each interval. Th

Susmita Horrow 25 Apr 28, 2022
The CITPincode package provides a customizable pincode view

The CITPincode package provides a customizable pincode view. It includes an optional resend code button with a built-in cooldown and an optional divider to be placed anywhere between the cells.

Coffee IT 3 Nov 5, 2022
Fully customizable Facebook reactions like control

Reactions is a fully customizable control to give people more ways to share their reaction in a quick and easy way. Requirements • Usage • Installatio

Yannick Loriot 585 Dec 28, 2022
:octocat:💧 A slider widget with a popup bubble displaying the precise value selected. Swift UI library made by @Ramotion

FLUID SLIDER A slider widget with a popup bubble displaying the precise value selected written on Swift. We specialize in the designing and coding of

Ramotion 1.9k Dec 23, 2022
A custom reusable circular / progress slider control for iOS application.

HGCircularSlider Example To run the example project, clone the repo, and run pod install from the Example directory first. You also may like HGPlaceho

Hamza Ghazouani 2.4k Jan 6, 2023
iOS 11 Control Center Slider

SectionedSlider Control Center Slider Requirements Installation Usage License Requirements iOS 8.0+ Swift 3.0+ Xcode 8.0+ Installation CocoaPods Cocoa

Leonardo Cardoso 361 Dec 3, 2022
List tree data souce to display hierachical data structures in lists-like way. It's UI agnostic, just like view-model and doesn't depend on UI framework

SwiftListTreeDataSource List tree data souce to display hierachical data structures in lists-like way. It's UI agnostic, just like view-model, so can

Dzmitry Antonenka 26 Nov 26, 2022
MZFormSheetPresentationController provides an alternative to the native iOS UIModalPresentationFormSheet, adding support for iPhone and additional opportunities to setup UIPresentationController size and feel form sheet.

MZFormSheetPresentationController MZFormSheetPresentationController provides an alternative to the native iOS UIModalPresentationFormSheet, adding sup

Michał Zaborowski 979 Nov 17, 2022
ScrollViewPlus is a small library that provides some helpful extension and capabilities for working with NSScrollView.

ScrollViewPlus is a small library that provides some helpful extension and capabilities for working with NSScrollView.

Chime 12 Dec 26, 2022
It provides UI components such as popover, popup, dialog supporting iOS apps

Overview LCUIComponents is an on-going project, which supports creating transient views appearing above other content onscreen when a control is selec

Linh Chu 7 Apr 8, 2020
Provides an iOS view controller allowing a user to draw their signature with their finger in a realistic style.

Swift version now available! Mimicking pen-on-paper signatures with a touch screen presents a difficult set of challenges. The rate touch events are e

Uber Open Source 1.3k Jan 6, 2023
A simple, customizable view for efficiently collecting country information in iOS apps.

CountryPickerView CountryPickerView is a simple, customizable view for selecting countries in iOS apps. You can clone/download the repository and run

Kizito Nwose 459 Dec 27, 2022
📊 A customizable gradient progress bar (UIProgressView).

GradientProgressBar A customizable gradient progress bar (UIProgressView). Inspired by iOS 7 Progress Bar from Codepen. Example To run the example pro

Felix M. 490 Dec 16, 2022
A customizable color picker for iOS in Swift

IGColorPicker is a fantastic color picker ?? written in Swift. Table of Contents Documentation Colors Style Other features Installation Example Gettin

iGenius 272 Dec 17, 2022
Modular and customizable Material Design UI components for iOS

Material Components for iOS Material Components for iOS (MDC-iOS) helps developers execute Material Design. Developed by a core team of engineers and

Material Components 4.6k Dec 29, 2022
Highly customizable Action Sheet Controller with Assets Preview written in Swift

PPAssetsActionController Play with me ▶️ ?? If you want to play with me, just tap here and enjoy! ?? ?? Show me ?? Try me ?? The easiest way to try me

Pavel Pantus 72 Feb 4, 2022
Simple and highly customizable iOS tag list view, in Swift.

TagListView Simple and highly customizable iOS tag list view, in Swift. Supports Storyboard, Auto Layout, and @IBDesignable. Usage The most convenient

Ela Workshop 2.5k Jan 5, 2023
An easy to use UI component to help display a signal bar with an added customizable fill animation

TZSignalStrengthView for iOS Introduction TZSignalStrengthView is an easy to use UI component to help display a signal bar with an added customizable

TrianglZ LLC 22 May 14, 2022