UISlider clone with multiple thumbs and values, range highlight, optional snap values, optional value labels, either vertical or horizontal.
- Multiple thumbs
- Range slider (optional) - track color between thumbs different from track color outside thumbs
- Vertical (optional)
- Value labels (optional)
- Snap steps or specific snap values (optional)
- Haptic feedback (optional)
- Configurable thumb image, minimum and maximum images.
- Configurable track width, color, rounding.
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@State var valueArray: [CGFloat] = [7, 13] // ... MultiValueSlider(value: $valueArray, minimumValue: 1, maximumValue: 5)The properties mentioned below can be used as modifiers, or passed as arguments to the MultiValueSlider initializer. For example:
MultiValueSlider(value: $valueArray, outerTrackColor: .lightGray) .thumbTintColor(.blue)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] }slider.outerTrackColor = .lightGray // outside of first and last thumbsslider.orientation = .horizontal // default is .vertical slider.isVertical = false // same effect, but accessible from Interface Builderslider.valueLabelPosition = .left // .notAnAttribute = don't show labels slider.valueLabelAlternatePosition = true // alternate left and right positions (false by default) slider.isValueLabelRelative = true // show differences between thumbs instead of absolute values slider.valueLabelFormatter.positiveSuffix = " 𝞵s" slider.valueLabelColor = .green slider.valueLabelFont = someFontFor more control over the label text:
slider.valueLabelTextForThumb = { thumbIndex, thumbValue in ["Parasol", "Umbrella"][thumbIndex] + " \(thumbValue)" }slider.snapStepSize = 0.5 // default is 0.0, i.e. don't snap slider.snapValues = [1, 2, 4, 8] // specify specific snap values instead uniform steps slider.isHapticSnap = false // default is true, i.e. generate haptic feedback when sliding over snap values slider.snapImage = UIImage(systemName: "circle.fill") // default: no imageslider.tintColor = .cyan // color of track slider.thumbTintColor = .blue // color of thumbs slider.trackWidth = 32 slider.hasRoundTrackEnds = true slider.showsThumbImageShadow = false // wide tracks look better without thumb shadow slider.centerThumbOnTrackEnd = true // when thumb value is minimum or maximum, align it's center with the track end instead of its edge// 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") // expand drag area when using a small thumb image: slider.thumbTouchExpansionRadius = 16// allow thumbs to overlap: slider.keepsDistanceBetweenThumbs = false // make thumbs keep a greater distance from each other (default = half the thumb size): slider.distanceBetweenThumbs = 3.14slider.disabledThumbIndices = [1, 3]- iOS 9.0+
- Xcode 10
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' |
dependencies: [ .package(url: "https://github.com/yonat/MultiSlider", from: "2.2.1") ]