:iphone: :large_blue_circle::heavy_minus_sign::large_blue_circle: An iOS range selection slider compatible with UIKit and SwiftUI. Developed using autolayout and highly customizable using IBDesignabled and IBInspectable or programmatically. It support also RTL (right to left) languages automatically out of the box.
An iOS range selection slider compatible with UIKit
and SwiftUI
. Developed using autolayout and highly customizable using @IBDesignabled
and @IBInspectable
or programmatically. It support also RTL (right to left) languages automatically out of the box.
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:
See the RangeUISliderDemo
demo project/target for an 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', '~> 3.0'
end
and then run pod install (or pod update).
Swift Package Manager (SPM)
RangeUISlider
is also available as a SPM package. Add it from the project configuration using the Github repository url. Choose master or a tag. If you choose the tag it must be >= 1.11.0.
You can use RangeUISlider in three ways:
UIKit
project using Interface Builder (thanks to @IBDesignable
and @IBInspectable
)UIKit
project programmaticallySwiftUI
project using the RangeSlider
wrapper created using UIViewRepresentable
To levearege the power of the RangeUISlider
in interface builder:
RangeUISlider
as custom class of that view
@IBDesignabled
and @IBInspectable
)Here you can find a video tutorial for the setup with Interface Builder.
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 RangeUISliderDemo
project to see multiple example (e.g. take a look at this contrroller. In particular, remember to set translatesAutoresizingMaskIntoConstraints = false
for the slider to use autolayout. Below you can find a simple example.
override func viewDidLoad() {
// ...other code
super.viewDidLoad()
rangeSlider = RangeUISlider(frame: CGRect(origin: CGPoint(x: 20, y: 20), size: CGSize(width: 100, height: 50)))
rangeSlider.translatesAutoresizingMaskIntoConstraints = false
rangeSlider.delegate = self
rangeSlider.barHeight = 20
rangeSlider.barCorners = 10
rangeSlider.leftKnobColor = #colorLiteral(red: 0.5725490451, green: 0, blue: 0.2313725501, alpha: 1)
rangeSlider.leftKnobWidth = 40
rangeSlider.leftKnobHeight = 40
rangeSlider.leftKnobCorners = 20
rangeSlider.rightKnobColor = #colorLiteral(red: 0.5725490451, green: 0, blue: 0.2313725501, alpha: 1)
rangeSlider.rightKnobWidth = 40
rangeSlider.rightKnobHeight = 40
rangeSlider.rightKnobCorners = 20
self.view.addSubview(rangeSlider)
// ...other code
}
You can use RangeUISlider
in a SwiftUI
application/screen by leveraging the RangeSlider
wrapper created using UIViewRepresentable
. Below you can find a small example of the usage in a simple screen. You can find more example in the RangeUISliderDemo
demo project (look here).
var body: some View {
VStack {
// ...other code
RangeSlider(minValueSelected: <binding value>, maxValueSelected: <binding value>)
.leftKnobColor(Color(#colorLiteral(red: 0.5725490451, green: 0, blue: 0.2313725501, alpha: 1)))
.leftKnobWidth(40)
.leftKnobHeight(40)
.leftKnobCorners(20)
.rightKnobColor(Color(#colorLiteral(red: 0.5725490451, green: 0, blue: 0.2313725501, alpha: 1)))
.rightKnobWidth(40)
.rightKnobHeight(40)
.rightKnobCorners(20)
// ...other code
}
}
You can access the range values in two ways, depending on the fact that you're using RangeUISlider
in a UIKit
or SwiftUI
view:
UIKit
, use RangeUISliderDelegate
and the delegate propertySwiftUI
, use the RangeSlider.minValueSelected
and RangeSlider.maxValueSelected
binding valuesTo get the current values from the slider in a UIKit
project, set the slider delegate property. The delegate of RangeUISlider
must implement the RangeUISliderDelegate
protocol, that has three methods. See code below.
@objc public protocol RangeUISliderDelegate {
/**
Calls the delegate when the user has started the change of the range.
*/
@objc optional func rangeChangeStarted()
/**
Calls the delegate when the user is changing the range by moving the knobs.
- parameter event: the change event data. See `RangeUISliderChangeEvent`.
*/
@objc optional func rangeIsChanging(event: RangeUISliderChangeEvent)
/**
Calls the delegate when the user has finished the change of the range.
- parameter event: the change finish event data. See `RangeUISliderChangeFinishedEvent`.
*/
@objc func rangeChangeFinished(event: RangeUISliderChangeFinishedEvent)
}
You can access the values of the slider in a SwiftUI
project by passing two bindings properties to the RangeSlider
init. See the example below.
struct SwiftUIHostingView: View {
@State private var minValueSelected: CGFloat = 10
@State private var maxValueSelected: CGFloat = 40
var body: some View {
VStack {
RangeSlider(minValueSelected: self.$minValueSelected, maxValueSelected: self.$maxValueSelected)
.scaleMinValue(5)
.scaleMaxValue(80)
.defaultValueLeftKnob(10)
.defaultValueRightKnob(40)
.leftKnobWidth(40)
.leftKnobHeight(40)
.leftKnobCorners(20)
.rightKnobColor(Color(#colorLiteral(red: 0.5725490451, green: 0, blue: 0.2313725501, alpha: 1)))
.rightKnobWidth(40)
.rightKnobHeight(40)
.rightKnobCorners(20)
}
}
}
UIKit
)You can also change the values of the slider knobs by calling this two API:
func changeLeftKnob(value: CGFloat)
to change programmatically the left knob valuefunc changeRightKnob(value: CGFloat)
to change programmatically the right knob valueThe value
passed to these methods should be in the slider range values (see the next section of the documentation to understand how to customize the slider range). Take a look at the example in the ChangeProgrammaticViewController contained in the demo project to understand how to use these API.
This is the list of the RangeUISlider
customizable properties directly from Interface Builder/programmatically (UIKit
) or by using the RangeSlider
access modifiers (SwiftUI
):
You can find the complete api documentation on fabrizioduroni.it.
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.