:octocat:💧 A slider widget with a popup bubble displaying the precise value selected. Swift UI library made by @Ramotion - https://dev.ramotion.com/gthbr
Switch branches/tags
Nothing to show
Clone or download
Latest commit f336343 Dec 10, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
Carthage/Checkouts/pop Import slider project Oct 22, 2017
Example swift 4.2 Sep 27, 2018
Slider.xcodeproj swift 4.2 Sep 27, 2018
Sources swift 4.2 Sep 27, 2018
.gitignore Import slider project Oct 22, 2017
.swift-version add swift-version file Jan 18, 2018
Cartfile Import slider project Oct 22, 2017
Cartfile.resolved Import slider project Oct 22, 2017
LICENSE Initial commit Oct 20, 2017
README.md Update README.md Dec 10, 2018
fluid-slider.gif Add files via upload Apr 28, 2018
fluid-slider.podspec swift 4.2 Sep 27, 2018
header.png update docs Nov 9, 2017
preview.gif update docs Nov 9, 2017



Fluid Slider

Twitter Carthage compatible codebeat badge Donate

Inspired by Virgil Pana shot

Check this library on other platforms:

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.


iOS 10.0
Xcode 9
Swift 4.0


You can install fluid-slider in several ways:

  • Add source files to your project.

pod 'fluid-slider'

github "Ramotion/fluid-slider"



import fluid_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

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.

This library is a part of a selection of our best UI open-source projects.

Get the Showroom App for iOS to give it a try

Try our UI components in our iOS app. Contact us if interested.

Follow us for the latest updates