RangeUISlider 1.7.0

RangeUISlider 1.7.0

TestsTested
LangLanguage SwiftSwift
License MIT
ReleasedLast Release Sep 2018
SPMSupports SPM

Maintained by Fabrizio Duroni.


Downloads

Total1,864
Week0
Month0

Installs

Apps101
Test Targets13
powered by Segment

GitHub

Stars11
Watchers5
Forks2
Issues0
Contributors1
Pull Requests0

Code

Files2
LOCLines of Code 866



RangeUISlider

Build Status GitHub license Supported platform CocoaPods Version CocoaPods Doc Coverage Percentage CocoaPods Download

A highly customizable iOS range selection slider, developed using autolayout and completely customizable using IBDesignabled and IBInspectable or programmatically.


Installation

There are three ways to install RangeUISlider in your project: manual installation, as a stand-alone framework or using cocoapods.

Manual installation

To manually install RangeUISlider simply drag and drop all the file contained in the Source folder inside your project.

Framework

RangeUISlider is available also as a framework. To install it follow the standard procedure used to install a custom cocoa touch framework (simply drag the RangeUISlider.xcodeproj inside your project and add it to the Embedded Binaries/Linked Frameworks and Libraries section of your project. See the demo project for a complete example of the setup of the framework.

CocoaPods

RangeUISlider is also available as a pod on CocoaPods. Add the dependency to your Podfile similar to the following:

target 'MyApp' do
    pod 'RangeUISlider', '~> 1.5'
end

and then run pod install (or pod update).


Usage

You can use RangeUISlider in two ways: in interface builder (thanks to@IBDesignable and @IBInspectable) or programmatically. Then you can use the RangeUISliderDelegate protocol to get the values of the slider.

Interface builder

  • drag a UIView into you storyboard
  • set RangeUISlider as custom class of that view
    • IMPORANT: set also the Module to RangeUISlider if you used cocoapods or the framework version during installation
  • start editing using interface builder

Here you can find a video tutorial for the setup with interface builder.

Programmatic

You can also use RangeUISlider as a programmatic UI component by setting all the property you need in your code. Take a look at the example in the SetupProgrammaticViewController contained in the demo project to see an example of programmatic setup.

RangeUISliderDelegate

To get the current values from the slider, set its delegate property. The delegate of the RangeUISlider must implement the RangeUISliderDelegate protocol, that has two methods:

/**
 Calls the delegate when the user is changing the range by moving the knobs.
     
 - parameter minValueSelected: the minimum value selected.
 - parameter maxValueSelected: the maximum value selected.
 - parameter slider: the slider on which the range has been modified.
 */
 @objc optional func rangeIsChanging(minValueSelected: CGFloat, maxValueSelected: CGFloat, slider: RangeUISlider)
    
/**
 Calls the delegate when the user has finished the change of the range.
    
 - parameter minValueSelected: the minimum value selected.
 - parameter maxValueSelected: the maximum value selected.
 - parameter slider: the slider on which the range has been modified.
 */
 @objc func rangeChangeFinished(minValueSelected: CGFloat, maxValueSelected: CGFloat, slider: RangeUISlider)

Customizable property

This is the list of the current customizable property of the RangeUISlider directly from Interface Builder using IBDesignable/IBInspectable:

  • identifier of the slider (Int )
  • range minimum value (CGFloat)
  • range maximum value (CGFloat)
  • default starting value left knob (CGFloat)
  • default starting value right knob (CGFloat)
  • range selected color
  • range selected image (override range selected color property)
  • range selected edge inset top, left, bottom, right (used only if range selected image has been setted)
  • range selected gradient color 1 (override range selected color and image)
  • range selected gradient color 1 (override range selected color and image)
  • range selected gradient start point (used only if range selected gradients color has been choosed)
  • range selected gradient end point (used only if range selected gradients color has been choosed)
  • range not selected color
  • range not selected image (override range not selected color property)
  • range not selected edge inset top, left, bottom, right (used only if range not selected image has been setted)
  • range not selected gradient color 1 (override range not selected color and image)
  • range not selected gradient color 1 (override range not selected color and image)
  • range not selected gradient start point (used only if range not selected gradients color has been choosed)
  • range not selected gradient end point (used only if range not selected gradients color has been choosed)
  • left knob width
  • left knob height
  • left knob corners radius
  • left knob color
  • left knob image (override color)
  • left knob shadow opacity
  • left knob shadow color
  • left knob shadow offset
  • left knob shadow radius
  • left knob gradient color 1 (override left knob color and image)
  • left knob gradient color 2 (override left knob color and image)
  • left knob gradient start point (used only if left knob gradients color has been choosed)
  • left knob gradient end point (used only if left knob gradients color has been choosed)
  • left knob border width
  • left knob border color
  • right knob width
  • right knob height
  • right knob corners radius
  • right knob color
  • right knob image (override color)
  • right knob shadow opacity
  • right knob shadow color
  • right knob shadow offset
  • right knob shadow radius
  • right knob gradient color 1 (override right knob color and image)
  • right knob gradient color 2 (override right knob color and image)
  • right knob gradient start point (used only if right knob gradients color has been choosed)
  • right knob gradient end point (used only if right knob gradients color has been choosed)
  • right knob border width
  • right knob border color
  • bar height
  • bar leading distance from container view
  • bar trailing distance from container view
  • bar corners
  • bar shadow opacity
  • bar shadow color
  • bar shadow offset
  • bar shadow radius
  • bar border width
  • bar border color
  • container corners

Documentation

You can find the complete api documentation on fabrizioduroni.it.


Examples

In the following screenshot you can find some examples of the level of customization that it is possible to reach. You can find this examples in the demo project.