Giter Club home page Giter Club logo

multislider's Introduction

MultiSlider

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

Swift Version Build Status License CocoaPods Compatible Platform PRs Welcome

Features

  • 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.

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 Usage

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)

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.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 = someFont

For more control over the label text:

slider.valueLabelTextForThumb = { thumbIndex, thumbValue in
    ["Parasol", "Umbrella"][thumbIndex] + " \(thumbValue)"
}

Snap steps

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 image

Changing Appearance

slider.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

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: "2.1.6")
]

Meta

@yonatsharon

https://github.com/yonat/MultiSlider

multislider's People

Contributors

yonat avatar benjaminfischer avatar nighthawk avatar sluzhynskyi avatar maxcan avatar hroland avatar joeypatino avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.