MultiSlider

UISlider clone with multiple thumbs and values, range highlight, optional snap intervals, optional value labels, either vertical or horizontal.

Features

• Multiple thumbs
• Range slider (optional) - track color between thumbs different from track color outside thumbs
• Vertical (optional)
• Value labels (optional)
• Snap interval (optional)
• Haptic feedback
• Configurable thumb image, minimum and maximum images.
• Configurable track width, color, rounding.

Usage

let slider = MultiSlider()
slider.minimumValue = 1    // default is 0.0
slider.maximumValue = 5    // default is 1.0

slider.value = [1, 4.5, 5]
slider.addTarget(self, action: #selector(sliderChanged(:)), for: .valueChanged) // continuous changes
slider.addTarget(self, action: #selector(sliderDragEnded(:)), for: . touchUpInside) // sent when drag ends

SwiftUI

Use

MultiValueSlider

Getting multiple thumb values

Use

value

draggedThumbIndex

func sliderChanged(slider: MultiSlider) {
    print("thumb \(slider.draggedThumbIndex) moved")
    print("now thumbs are at \(slider.value)") // e.g., [1.0, 4.5, 5.0]
}

Range slider

slider.outerTrackColor = .lightGray // outside of first and last thumbs

Vertical / horizontal orientation

slider.orientation = .horizontal // default is .vertical
slider.isVertical = false // same effect, but accessible from Interface Builder

Value labels

slider.valueLabelPosition = .left // .notAnAttribute = don't show labels
slider.isValueLabelRelative = true // show differences between thumbs instead of absolute values
slider.valueLabelFormatter.positiveSuffix = " 𝞵s"
slider.valueLabelColor = .green
slider.valueLabelFont = someFont

Snap interval

slider.snapStepSize = 0.5 // default is 0.0, i.e. don't snap
slider.isHapticSnap = false // default is true, i.e. generate haptic feedback when sliding over snap values

Changing Appearance

slider.tintColor = .cyan // color of track
slider.trackWidth = 32
slider.hasRoundTrackEnds = true
slider.showsThumbImageShadow = false // wide tracks look better without thumb shadow

Images

// add images at the ends of the slider:
slider.minimumImage = UIImage(named: "clown")
slider.maximumImage = UIImage(named: "cloud")

// change image for all thumbs:
slider.thumbImage = UIImage(named: "balloon")
// or let each thumb have a different image:
slider.thumbViews[0].image = UIImage(named: "ball")
slider.thumbViews[1].image = UIImage(named: "club")

Distance/Overlap Between Thumbs

// allow thumbs to overlap:
slider.keepsDistanceBetweenThumbs = false

// make thumbs keep a greater distance from each other (default = half the thumb size):
slider.distanceBetweenThumbs = 3.14

Disabling/freezing thumbs

slider.disabledThumbIndices = [1, 3]

Requirements

• iOS 9.0+
• Xcode 10

Installation

CocoaPods:

pod 'MultiSlider'

Legacy versions:

| Swift version | MultiSlider version | | :---: | :--- | | 4.0 (Xcode 9.4) |

pod 'MiniLayout', '~> 1.2.1'

pod 'MultiSlider', '~> 1.6.0'

pod 'MiniLayout', '~> 1.1.0'

pod 'MultiSlider', '~> 1.1.2'

pod 'MiniLayout', '~> 1.0.1'

pod 'MultiSlider', '~> 1.0.1'

Swift Package Manager:

dependencies: [
    .package(url: "https://github.com/yonat/MultiSlider", from: "1.11.2")
]

Meta

@yonatsharon

https://github.com/yonat/MultiSlider