A slider widget with a popup bubble displaying the precise value selected

Programming language: Swift
License: MIT License
Tags: Animation     Kit     UI     iOS     Slider    
Latest version: v1.1.0

Fluid Slider alternatives and similar libraries

Based on the "Animation" category.
Alternatively, view Fluid Slider alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of Fluid Slider or a related project?

Add another 'Animation' Library



A slider widget with a popup bubble displaying the precise value selected written on Swift.

We specialize in the designing and coding of custom UI for Mobile Apps and Websites. Stay tuned for the latest updates:

Inspired by Virgil Pana shot

Twitter Carthage compatible codebeat badge Donate


  • iOS 10.0
  • Xcode 9
  • Swift 4.0


You can install fluid-slider in several ways:

  • Add source files to your project.
  • Use Carthage: 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.

πŸ—‚ Check this library on other language:

πŸ“„ License

Fluid Slider is released under the MIT license. See [LICENSE](./LICENSE) for details.

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

If you use the open-source library in your project, please make sure to credit and backlink to https://www.ramotion.com/

πŸ“± 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.

*Note that all licence references and agreements mentioned in the Fluid Slider README section above are relevant to that project's source code only.