Giter Club home page Giter Club logo

ios-tactile-slider's Introduction

TactileSlider

CI Status Swift Package Manager compatible Version Carthage compatible License Platform

A slider control designed to be easy to grab and use because it can be dragged or tapped from anywhere along its track, similar to the sliders in Control Center and HomeKit. Because this type of slider graphically represents direct manipulation of a value, it should be used for live adjustment of values whose changes can be directly observed in real time (such as audio volume or the brightness of a light).

Animation of TactileSliders in various orientations being clicked and dragged in the iOS simulator, followed by a transition from light to dark appearance

Features

  • Can be dragged or (optionally) tapped to set a value
  • Supports horizontal and vertical orientation in either direction
  • IBDesignable – colors, values, rounded corners, and behavior can be customized in Interface Builder or programatically
  • Supports light & dark appearance using semantic system colors with borders that can automatically appear in low contrast situations (iOS 13+)
  • Adjustable haptic feedback (iOS 10+)
  • VoiceOver support
  • Supports pointer (e.g. trackpad or mouse) based scrolling on iPadOS (iOS 13.4+)

Example

To run the example project, clone the repo, and run pod install from the Example directory first.

Requirements

iOS 9.0+

  • iOS 10.0+ required for haptic feedback
  • iPadOS 13.4+ required for pointer use

Installation

TactileSlider is available as a Swift package or through CocoaPods.

To install it using CocoaPods, simply add the following line to your Podfile:

pod 'TactileSlider'

Usage

For the full documentation using Xcode 13 or later, add TactileSlider as a dependency or download a local copy, then choose Product > Build Documentation. In previous versions of Xcode, symbol documentation will appear in Quick Help.

let slider = TactileSlider(frame: someRect)

slider.minimumValue = 1
slider.maximumValue = 10

slider.setValue(3.8, animated: true)

Setting orientation and direction

slider.vertical = true
slider.reverseValueAxis = true

Adjusting behavior

slider.isContinuous = false // send events only at end of gesture vs continuously
slider.enableTapping = false // allow or disallow tapping anywhere on the slider track to instantly set a value
slider.feedbackStyle = .medium // customize haptic feedback when the slider reaches the end
slider.isScrollingEnabled = false // allow or disallow scrolling to adjust the slider using a connected pointing device on iPadOS
slider.precisionRampUpDistance = 10 // enable finer adjustment when moving the slider by amounts smaller than this distance (in screen points)

Changing colors and appearance

slider.trackBackground = UIColor.black.withAlpha(0.8) // use translucent black for the slider track
slider.tintColor = UIColor.systemGreen // use dynamic green for the slider thumb

slider.outlineColor = UIColor.gray // color of outline around slider and thumb (if unset, will be determined automatically based on contrast between tintColor and current system appearance)
slider.outlineColorProvider = { slider, suggestedColor -> UIColor? in  } // provide your own closure to set the outline color dynamically
slider.outlineSize = 2 // set thickness of outline

slider.cornerRadius = 12 // size of corner radius; defaults to automatic based on the slider's bounds

slider.isPointerInteractionEnabled = true // display a hover effect when under the pointer on iPadOS

Fine tuning accessibility

By default, the accessibility increment and decrement gestures change the value by 10% of the slider's range, matching the behavior of UISlider. This can be adjusted:

slider.steppingMode = .percentage(5) // specify a percentage to increment/decrement the slider's value by
slider.steppingMode = .stepValue(0.1) // specify a fixed value to increment/decrement the slider's value by

Interface Builder

screenshot of Xcode Interface Builder demonstrating a TactileSlider being customized using the graphical interface

Author

Dale Price (@[email protected])

License

TactileSlider is available under the MIT license. See the LICENSE file for more info.

ios-tactile-slider's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

ios-tactile-slider's Issues

sendActions not called if isContinuous = false

I think there is the following problem:

If the slider is set to isContinuous = false and the user drags to the maximum or minimum, sendActions(for: .valueChanged) is not fired.

Reason is, in didPan(sender: UIPanGestureRecognizer), you stop handing the pan if value == minimum && valueChange < 0 or value == maximum && valueChange > 0.

Action should still be sent once even for minimum or maximum value.
Otherwise it is impossible to detect if slider is set to minimum/maximum.

can we add image or view on slider

I tried to add image then it goes down from slider
internal func setupLayers() {
trackLayer.addSublayer(thumbLayer)
trackLayer.addSublayer(outlineLayer)
let uiview1 = UIView()
let uiview2 = UIView()
uiview1.frame = CGRect(x: 5, y: 0, width: thumbLayer.frame.width - 10 , height: 98)
uiview2.frame = CGRect(x: 5, y: 0, width: 44 , height: 44)
let appLightGrayColor = UIColor(red: 201.0/255.0, green: 201.0/255.0, blue: 201.0/255.0, alpha: 1.0)
uiview1.backgroundColor = appLightGrayColor
uiview1.layer.cornerRadius = 10
// uiview1.addSubview(uiview2)
// uiview2.center = uiview1.center
// uiview2.frame = uiview1.frame
uiview2.center = uiview1.center
uiview2.layer.contents = UIImage(named: "power-signal-white")?.cgImage
uiview2.layer.contentsGravity = CALayerContentsGravity.resizeAspect
// uiview1.center = uiview1.center
// uiview1.addSubview(uiview2)
uiview1.layer.addSublayer(uiview2.layer)
thumbLayer.addSublayer(uiview1.layer)

thumbLayer.addSublayer(thumbOutlineLayer)
    
}

cornerRadius is private

Hi thanks for this library, but you may want to open the cornerRadius properties on the next update. Thank you

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.