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

Overview

FLUID SLIDER

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

Requirements

  • iOS 10.0
  • Xcode 9
  • Swift 4.0

Installation

You can install fluid-slider in several ways:

  • Add source files to your project.

pod 'fluid-slider'

github "Ramotion/fluid-slider"

Usage

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

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

Comments
  • Minimum and Maximum Value for Slider Fraction

    Minimum and Maximum Value for Slider Fraction

    How can i change the slider minimum value default 0 to another? I am changing the minimum and maximum label attributed text but I am unable to change the default minimum fraction value that starts from 0 and the maximum value of fraction

    img_0662

    opened by ankita94p 4
  • framework not found fluid_slider

    framework not found fluid_slider

    ld: warning: directory not found for option '-F/Users/mt/Library/Developer/Xcode/DerivedData/Example-erbzcbnkrlutncedbyrdaevikjvj/Build/Products/Debug-iphonesimulator/fluid-slider'
    ld: framework not found fluid_slider
    clang: error: linker command failed with exit code 1 (use -v to see invocation)
    

    I tried to clean & build no luck...

    I have no idea why I am getting this error. Im not even sure if this is related to the framework or just my Mac. I tried to re-install the pods, w iOS 11.2. I am missing something but I don't know what ??

    Help please.

    My podfile:

    # Uncomment the next line to define a global platform for your project
    platform :ios, '11.2'
    
    target 'Example' do
      # Comment the next line if you're not using Swift and don't want to use dynamic frameworks
      use_frameworks!
    
    pod 'pop', '~> 1.0'
    pod 'fluid-slider'
    
      # Pods for Example
    
    end
    

    By the way I also tried running w source files.

    opened by BedirT 4
  • Cannot import pop

    Cannot import pop

    Hi, when trying to include the component into a project via Carthage i get the following error: […]/Carthage/Checkouts/fluid-slider/Sources/ValueView.swift:10:8: error: no such module 'pop' import pop

    opened by uargh 3
  • Increment by X amount

    Increment by X amount

    I am looking to add a way to use increments of 10. So if I had max set to 100, it would jump 10, 20, 30... 80, 90, 100 and allow no other values. Is there any way to currently do this or an easy way to add this functionality?

    For Kotlin, I would guess we would need to modify the ACTION_MOVE event?

    opened by codeversed 1
  • Allow override init to make custom class fixes #19

    Allow override init to make custom class fixes #19

    Installed through Cocoapod

    My podfile:
    pod 'fluid-slider'
    

    I Could not subClass Slider Class

    class MySliderView: Slider {
        init(frame: CGRect) {
            super.init(frame: frame) // make superview public
        }
    }
    

    The error is

    Incorrect argument label in call (have 'frame:', expected 'coder:')
    Replace 'frame' with 'coder'
    

    Inside Slider class init(coder:) is public In this commit I made init(frame:) public also

    This'll fix issue number 19 override init to make custom reusable Slider #19

    opened by rishi420 1
  • Bubble not connected

    Bubble not connected

    I am experiencing a problem where the bubble is not connected to the bar as is shown in your animated gif.

    fluid

    I am using code from your example project.

    opened by mightymango 1
  • Failed to 'import Slider' No such Module found

    Failed to 'import Slider' No such Module found

    So I tried to embedd the fluid slider into my project and I get an Error message when I try to import the the Library. I tried to do the same thing like the Example project. I don't get it why I get this error.

    bildschirmfoto 2018-03-21 um 16 22 16

    And I don't think there is something wrong with my Podfile.

    bildschirmfoto 2018-03-21 um 16 21 45

    Would be nice if someone could help.

    opened by maybeniko 1
  • override init to make custom reusable Slider

    override init to make custom reusable Slider

    Dmitriy thanks for excellent widget

    Can u please explain how can i override init methods to make custom class of Slider reusable. Overriding required init throws errors.

    opened by bios90 0
  • Negative number

    Negative number

    I want to start my slider from -100 to 100. I can set the -100 on slider but when I try to slide bubble not show negative numbers. Is it possible to work with negative numbers?

    opened by MariaJsn 1
  • sliderValueChanged

    sliderValueChanged

    Hi there!

    I'm trying to get the current slider value as soon as the slider is dragged. I've added an action for this called sliderValueChanged but how can I get the current sliderValue now?

    Thanks!

    opened by matthijsotterloo 1
Owner
Ramotion
UI Engineering, UI/UX Design and Front-End Development Agency
Ramotion
An animated label for displaying numbers

RollingDigitsLabel A simple label that animates a number with each digit falling into place. Installation Swift Package Manager dependencies: [ .p

Nathan Chiu 6 Dec 31, 2022
A framework and generator for displaying SwiftUI component libraries

Exhibition Exhibition is a framework and generator for displaying a SwiftUI component library. Inspired by Storybook and Showkase Installation Swift P

Malcolm Jarvis 23 Dec 30, 2022
Awaiting - Swift @propertyWrapper that waits asynchronously until the value matches a predicate

Introduction @Awaiting is a Swift @propertyWrapper that waits asynchronously unt

Simon Whitty 7 Jul 15, 2022
Gemini is rich scroll based animation framework for iOS, written in Swift.

Overview What is the Gemini? Gemini is rich scroll based animation framework for iOS, written in Swift. You can easily use GeminiCollectionView, which

Shohei Yokoyama 3k Dec 27, 2022
Pulse animation for iOS written with Swift.

Pulsator Pulse animation for iOS written with Swift. Great For: Pulses of Bluetooth, BLE, beacons (iBeacon), etc. Map Annotations Installation CocoaPo

Shuichi Tsutsumi 1.3k Jan 6, 2023
Ubergang is a tweening engine for iOS written in Swift.

Ubergang is a tweening engine for iOS written in Swift. Features Tween numeric values, UIColors and CGAffineTransforms Tween along UIBezierPaths Tween

Robin Falko 54 Apr 15, 2022
Various view's effects for iOS, written in Swift. Allows you to animate views nicely with easy to use extensions

Various view's effects for iOS, written in Swift. Allows you to animate views nicely with easy to use extensions. Every animation is randomized. Currently supported animations:

Artur Rymarz 23 Aug 23, 2022
SYBlinkAnimationKit is a blink effect animation framework for iOS, written in Swift.

SYBlinkAnimationKit is a blink effect animation framework for iOS, written in Swift ?? Demo There are 5 types of animation for component. border borde

Shohei Yokoyama 126 Oct 28, 2021
Fully customizable circular progress bar written in Swift.

Fully customizable, circular progress bar written in Swift. Example To run the example project, clone the repo, and run pod install from the Example d

Lionheart Software 137 Nov 11, 2022
TRightImageButton is a simple and flexible UI component fully written in Swift.

TRightImageButton is a simple and flexible UI component fully written in Swift. TRightImageButton is developed to help programmers create a button with right image quickly without having to write many lines of codes.

Nguyen Duc Thinh 2 Aug 18, 2022
TTouchAnimatedButton is a simple and flexible animation component fully written in Swift

TTouchAnimatedButton is a simple and flexible animation component fully written in Swift. TTouchAnimatedButton is developed to make user feel button click becomes more vivid and realistic.

Nguyen Duc Thinh 2 Aug 18, 2022
☄️Comets: Animating Particles in Swift

Comets ☄️ Comets: Animating Particles in Swift animation made by kevin as part of Voicy design implements Bennet van der Linden medium Comets: Animati

Cruz 593 Dec 28, 2022
A DSL to make animation easy on iOS with Swift.

This project is highly inspired by JHChainableAnimations, If you project is developed with Objective-C, use JHChainableAnimations instead. With DKChai

Draven 1.9k Dec 9, 2022
A Swift library to take the power of UIView.animateWithDuration(_:, animations:...) to a whole new level - layers, springs, chain-able animations and mixing view and layer animations together!

ver 2.0 NB! Breaking changes in 2.0 - due to a lot of requests EasyAnimation does NOT automatically install itself when imported. You need to enable i

Marin Todorov 3k Dec 27, 2022
Elegant SVG animation kit for swift

Elephant This is SVG animation presentation kit for iOS. Example You can run example app. Please open Example-iOS/Elephant-iOS.xcworkspace! Usage You

Kazumasa Shimomura 127 Dec 14, 2022
Swift interpolation for gesture-driven animations

Interpolate Interpolate is a powerful Swift interpolation framework for creating interactive gesture-driven animations. Usage The ?? idea of Interpola

Roy Marmelstein 1.8k Dec 20, 2022
A library to simplify iOS animations in Swift.

Updated for Swift 4.2 Requires Xcode 10 and Swift 4.2. Installation Drop in the Spring folder to your Xcode project (make sure to enable "Copy items i

Meng To 14k Jan 3, 2023
Better Easing for SpriteKit in Swift

This easing library began life as a port of buddingmonkey's Objective C SpriteKit Easing library to Swift. This library extends upon the basic easing

Craig Grummitt 110 Dec 17, 2022
Swift library for choreographing animations on the screen.

Spruce iOS Animation Library (and Android) What is it? Spruce is a lightweight animation library that helps choreograph the animations on the screen.

WillowTree, LLC 3.4k Jan 3, 2023