:octocat:💧 A slider widget with a popup bubble displaying the precise value selected. Swift UI library made by @Ramotion

Related tags

UI swift ios library
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
Bubble pickers, inspired by Apple

AmazingBubbles Bubble pickers, inspired by Apple Requirements: iOS 9.1+ XCode 8.0+ Swift 3.0 Installation AmazingBubbles Library is available through

Gleb Radchenko 63 Oct 14, 2022
This widget displays a weight and a label. It can be used in the summary view for a strength assessment.

Strength Assessment Widget - Flutter Modern UI engineering is all about components. When we build components to be reusable, we enable faster iteratio

null 1 Feb 18, 2022
StarryStars is iOS GUI library for displaying and editing ratings

StarryStars StarryStars is iOS GUI library for displaying and editing ratings Features StarryStars' RatingView is both IBDesignable and IBInspectable

Peter Prokop 175 Nov 19, 2022
It provides UI components such as popover, popup, dialog supporting iOS apps

Overview LCUIComponents is an on-going project, which supports creating transient views appearing above other content onscreen when a control is selec

Linh Chu 7 Apr 8, 2020
ToastSwiftUI-master - A simple way to show a toast or a popup in SwiftUI

ToastSwiftUI-master - A simple way to show a toast or a popup in SwiftUI

Kushal Shingote 2 May 25, 2022
A fancy hexagonal layout for displaying data like your Apple Watch

Hexacon is a new way to display content in your app like the Apple Watch SpringBoard Highly inspired by the work of lmmenge. Special thanks to zenly f

Gautier Gédoux 340 Dec 4, 2022
A custom reusable circular / progress slider control for iOS application.

HGCircularSlider Example To run the example project, clone the repo, and run pod install from the Example directory first. You also may like HGPlaceho

Hamza Ghazouani 2.4k Jan 6, 2023
RangeSeedSlider provides a customizable range slider like a UISlider.

RangeSeekSlider Overview RangeSeekSlider provides a customizable range slider like a UISlider. This library is based on TomThorpe/TTRangeSlider (Objec

WorldDownTown 644 Dec 12, 2022
iOS 11 Control Center Slider

SectionedSlider Control Center Slider Requirements Installation Usage License Requirements iOS 8.0+ Swift 3.0+ Xcode 8.0+ Installation CocoaPods Cocoa

Leonardo Cardoso 361 Dec 3, 2022
A swift PropertyWrapper to provide automatic NSView/UIView invalidation when the properties value changes.

A swift PropertyWrapper to provide automatic NSView/UIView invalidation when the properties value changes. It duplicates the @Invalidating propertyWrapper for build targets prior to macOS 12 and iOS 15.

Darren Ford 8 Oct 15, 2021
UISlider clone with multiple thumbs and values, range highlight, optional snap intervals, optional value labels, either vertical or horizontal.

MultiSlider UISlider clone with multiple thumbs and values, range highlight, optional snap intervals, optional value labels, either vertical or horizo

Yonat Sharon 326 Dec 29, 2022
A customizable Joystick made with SwiftUI

SwiftUIJoystick ??️ A customizable Joystick made with SwiftUI Create your own Base and Thumb/Handle view using SwiftUI Examples ?? Installation Swift

Michaellis 19 Nov 13, 2022
EdvoraUI - The UI for the login page for Edvora made in SwiftUI

About This is the UI for the login page for Edvora made in SwiftUI. Screenshot L

Noman Ahmad 0 Jan 11, 2022
We-split - A study app made using SwiftUI

We Split We Split is a study app made using SwiftUI, being part of 100 Days of S

Gabriel Pereira 1 Mar 16, 2022
Powerful and easy-to-use vector graphics Swift library with SVG support

Macaw Powerful and easy-to-use vector graphics Swift library with SVG support We are a development agency building phenomenal apps. What is Macaw? Mac

Exyte 5.9k Jan 1, 2023
Lightweight touch visualization library in Swift. A single line of code and visualize your touches!

TouchVisualizer is a lightweight pure Swift implementation for visualising touches on the screen. Features Works with just a single line of code! Supp

Morita Naoki 851 Dec 17, 2022
A nice iOS View Capture Swift Library which can capture all content.

SwViewCapture A nice iOS View Capture Library which can capture all content. SwViewCapture could convert all content of UIWebView to a UIImage. 一个用起来还

Xing Chen 597 Nov 22, 2022
BulletinBoard is an iOS library that generates and manages contextual cards displayed at the bottom of the screen

BulletinBoard is an iOS library that generates and manages contextual cards displayed at the bottom of the screen. It is especially well

Alexis (Aubry) Akers 5.3k Jan 2, 2023
A library to recreate the iOS Apple Music now playing transition

DeckTransition DeckTransition is an attempt to recreate the card-like transition found in the iOS 10 Apple Music and iMessage apps. Hereʼs a GIF showi

Harshil Shah 2.2k Dec 15, 2022