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
from the swiftui branch.
Getting multiple thumb values
Use value
to get all thumbs values, and draggedThumbIndex
to find which thumb was last moved.
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' |
3 | pod 'MiniLayout', '~> 1.1.0' pod 'MultiSlider', '~> 1.1.2' |
2.3 | 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")
]