A slider widget with a popup bubble displaying the precise value selected. Made by @Ramotion

Fluid Slider

Inspired by Virgil Pana shot

Looking for developers for your project?
This project is maintained by Ramotion, Inc. We specialize in the designing and coding of custom UI for Mobile Apps and Websites.

The iPhone mockup available here.

Try this UI control in action

Requirements

iOS 10.0
Xcode 9
Swift 4.0

Installation

You can install fluid-slider in several ways:

• Add source files to your project.

• Use CocoaPods:

pod 'fluid-slider'

• Use Carthage:

github "Ramotion/fluid-slider"

Usage

Slider

The slider can be inserted in a view hierarchy as a subview. Appearance can be configured with a number of public attributes:

let slider = Slider()
slider.attributedTextForFraction = { fraction in
    let formatter = NumberFormatter()
    formatter.maximumIntegerDigits = 3
    formatter.maximumFractionDigits = 0
    let string = formatter.string(from: (fraction * 500) as NSNumber) ?? ""
    return NSAttributedString(string: string)
}
slider.setMinimumLabelAttributedText(NSAttributedString(string: "0"))
slider.setMaximumLabelAttributedText(NSAttributedString(string: "500"))
slider.fraction = 0.5
slider.shadowOffset = CGSize(width: 0, height: 10)
slider.shadowBlur = 5
slider.shadowColor = UIColor(white: 0, alpha: 0.1)
slider.contentViewColor = UIColor(red: 78/255.0, green: 77/255.0, blue: 224/255.0, alpha: 1)
slider.valueViewColor = .white
view.addSubview(slider)

Take a look at the Example project for an integration example.

Since Slider is a subclass of UIControl, it inherits target-action mechanics and it's possible to listen for user-triggered value changes:

slider.addTarget(self, action: #selector(sliderValueChanged), for: .valueChanged)

Tracking Behavior

There are a couple of callbacks which allow you to listen to the slider's tracking events:

    var didBeginTracking: ((Slider) -> ())?
    var didEndTracking: ((Slider) -> ())?

Animation Performance

This control is designed to use device CPU resources with care. The fluid-style animation will be disabled when low power mode is enabled or the system is under heavy load.

Get the Showroom App for iOS to give it a try

Try this UI component and more like this in our iOS app. Contact us if interested.

Follow us for the latest updates