Latest 0.2
License MIT
Platforms ios 8.0, requires ARC
Authors ,

Swift Carthage Compatible CocoaPods

A custom range slider in Swift. Well-documented with examples. Forked from RangeSlider with some enhancements.



  • iOS: 8.0+
  • Xcode 8.1+
  • Swift 3.0+



CocoaPods 1.1.0+ is required to build NHRangeSlider.

source ''
platform :ios, '10.0'

target '<Your Target Name>' do
    pod 'NHRangeSlider', '~> 0.2'

Then, run the:

$ pod install


Put the following in your Cartfile:

 github "thehung111/NHRangeSlider" ~> 0.2

Run carthage update --platform iOS --no-use-binaries


You can just copy the 2 source files (NHRangeSlider and NHRangeSliderView) under NHRangeSlider/NHRangeSlider folder into your project.


Default Slider

By default, the title label is not shown and the left and right thumbs will be circles (curvaceousness set to 1). You can add the view in code or via story board:

 override func viewDidLoad() {

    // default slider. Configure the frame
    let sliderView = NHRangeSliderView(frame: CGRect(x: 16, y: 20, width: self.view.bounds.width - 32, height: 80) )
    // call size to fit to resize the height to fit exactly


Slider with Square Thumbs

let sliderSquareView = NHRangeSliderView(frame: ...)

// set to 0 for square
sliderSquareView.curvaceousness = 0.0

sliderSquareView.trackHighlightTintColor =
sliderSquareView.lowerValue = 20.0
sliderSquareView.upperValue = 80.0

Slider with title

let sliderSquareWithLabelView = NHRangeSliderView(frame: ...)
sliderSquareWithLabelView.curvaceousness = 0.0
sliderSquareWithLabelView.trackHighlightTintColor = UIColor.brown
sliderSquareWithLabelView.lowerValue = 20.0
sliderSquareWithLabelView.upperValue = 80.0

// set title text
sliderSquareWithLabelView.titleLabel?.text = "Slider with title label"


Slider with labels following thumbs

let sliderWithLabelFollowView = NHRangeSliderView(frame: ...)
sliderWithLabelFollowView.trackHighlightTintColor =
sliderWithLabelFollowView.lowerValue = 30.0
sliderWithLabelFollowView.upperValue = 70.0
sliderWithLabelFollowView.gapBetweenThumbs = 5

// set style to follow
sliderWithLabelFollowView.thumbLabelStyle = .FOLLOW

sliderWithLabelFollowView.titleLabel?.text = "Slider with labels follow thumbs"

Slider with custom format

let sliderCustomStringView = NHRangeSliderView(frame: ...)
sliderCustomStringView.trackHighlightTintColor =
sliderCustomStringView.lowerValue = 30.0
sliderCustomStringView.upperValue = 70.0
sliderCustomStringView.stepValue = 10
sliderCustomStringView.gapBetweenThumbs = 10

sliderCustomStringView.thumbLabelStyle = .FOLLOW

sliderCustomStringView.titleLabel?.text = "Stepped slider with custom format"
sliderCustomStringView.lowerDisplayStringFormat = "Min: $%.0f"
sliderCustomStringView.upperDisplayStringFormat = "Max: $%.0f"

Stepped Slider

Handle stepped values. The slider will snap to discrete points (after dragging stopped) along the slider based on the stepped value.

sliderSquareWithLabelView.stepValue = 5.0


The range slider view (NHRangeSliderView) can be customized and information can be accessed through these properties :

  • titleLabel : label for title (optional)
  • lowerLabel : label for lower thumb
  • upperLabel : label for upper thumb
  • minimumValue : The minimum possible value of the range
  • maximumValue : The maximum possible value of the range
  • lowerValue : The value corresponding to the left thumb current position
  • upperValue : The value corresponding to the right thumb current position
  • stepValue : If set, will snap to discrete step points along the slider . Default to nil.
  • trackTintColor : The track color
  • trackHighlightTintColor : The color of the section of the track located between the two thumbs
  • thumbTintColor: The thumb color
  • thumbBorderColor: The thumb border color
  • thumbBorderWidth: The width of the thumb border
  • curvaceousness : From 0.0 for square thumbs to 1.0 for circle thumbs
  • lowerDisplayStringFormat : display format for lower thumb value. Default to %.0f to display value as Int. Change this if you need to display decimal places or want a different label.
  • upperDisplayStringFormat : display format for upper thumb value. Default to %.0f to display value as Int. Change this if you need to display decimal places or want a different label.
  • spacing : vertical spacing between the labels and thumbs
  • thumbLabelStyle : position of thumb labels. Set to STICKY to stick to left and right positions. Set to FOLLOW to follow left and right thumbs
  • gapBetweenThumbs : minimum distance between thumbs

    To listen for value changes event, you can set the delegate (NHRangeSliderViewDelegate): sliderValueChanged(slider:)

API Reference

Latest podspec

    "name": "NHRangeSlider",
    "version": "0.2",
    "summary": "A custom range slider in Swift.",
    "description": "A custom range slider in Swift. Circle/square left right thumbs with labels and custom string format.",
    "homepage": "",
    "license": {
        "type": "MIT",
        "file": "LICENSE"
    "authors": {
        "Ngo Hung": "[email protected]",
        "The Hung ": "[email protected]"
    "platforms": {
        "ios": "8.0"
    "source": {
        "git": "",
        "tag": "0.2"
    "source_files": "NHRangeSlider/NHRangeSlider/**/*.{h,swift}",
    "requires_arc": true,
    "pushed_with_swift_version": "3.0"

Pin It on Pinterest

Share This