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

Related tags

Slider 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
PhotoSlider is a simple photo slider and can delete slider with swiping.

PhotoSlider is a simple photo slider and can delete slider with swiping.

Daichi Nakajima 246 Oct 27, 2022
A custom reusable slider control with 2 thumbs (range slider).

MARKRangeSlider A custom reusable slider control with 2 thumbs (range slider). Values range is between minimumValue and maximumValue (from 0 to 1 by d

Vadym Markov 181 Sep 18, 2022
🎚️ STDiscreteSlider – slider which allows user to choose value only from predefined set of data.

STDiscreteSlider – slider which allows user to choose value only from predefined set of data. Slider may receive any types of options, you may pass set of integers or strings, or any other type. Written using SwiftUI.

Tamerlan Satualdypov 15 Apr 3, 2022
A simple range slider made in Swift

RangeSlider Summary A simple range slider made in Swift. Screenshot Use This control is IBDesignable and uses the target-action pattern for change not

William Archimede 303 Oct 4, 2022
A reusable Slider View made with SwiftUI

ZSlider A reusable Slider View made with SwiftUI. Installation: Minimum version iOS 13 In Xcode go to File -> Swift Packages -> Add Package Dependency

null 6 Jul 28, 2022
IntervalSlider is a slider library like ReutersTV app. written in pure swift.

IntervalSlider Description and appetize.io`s DEMO To run the example project, clone the repo, and run pod install from the Example directory first. Re

Nobuyasu 65 May 23, 2021
CircleSlider is a Circular slider library. written in pure Swift.

CircleSlider Description and appetize.io`s DEMO Usage To run the example project, clone the repo, and run pod install from the Example directory first

Nobuyasu 142 May 9, 2022
An iOS Slider written in Swift.

JDSlider Beetripper App's screenshots Example Project To run the example project, clone the repo, and run pod install from the Example directory first

Jelly Development 84 Jul 26, 2022
A beautiful slider control for iOS built purely upon Swift

SnappingSlider A beautiful slider control for iOS. Installation There are two ways to add the control to your project; you can add it as a submodule i

Rehat Kathuria 576 Jun 29, 2022
A feature-rich circular slider control written in Swift.

MTCircularSlider Screenshot Usage To run the example project, clone the repo, and run pod install from the Example directory first. Requirements iOS 1

Eran Boudjnah 130 Sep 19, 2022
VerticalSlider is a vertical slider control for iOS in Swift.

?? VerticalSlider If you like VerticalSlider, give it a ★ at the top right of this page. Overview VerticalSlider is a vertical implementation of the U

Jon Kent 78 Sep 15, 2022
A powerful Circular Slider. It's written in Swift, it's 100% IBDesignable and all parameters are IBInspectable.

CircularSlider A powerful Circular Slider. It's written in Swift, it's 100% IBDesignable and all parameters are IBInspectable. Demo Installation Circu

Matteo Tagliafico 253 Sep 19, 2022
FlowerSlider - Flower Slider Animation Built With Swift

FlowerSlider Shape Slider Screenshot

Joey Graham 4 Sep 27, 2022
VerticalSlider - An animatable and customizable vertical slider written in Swift 4

VerticalSlider An animatable and customizable vertical slider written in Swift 4. Quick Start VerticalSliderPlayground Clone Repo Open VSVerticalSlide

Vincent Smithers 13 Apr 26, 2022
Custom & highly configurable seek slider with sliding intervals, disabled state and every possible setting to tackle!

iLabeledSeekSlider Custom & highly configurable seek slider with sliding intervals, disabled state and every possible setting to tackle! Minimum iOS v

Edgar Žigis 9 Aug 16, 2022
TriggerSlider is a simple SwiftUI trigger slider

TriggerSlider is a simple SwiftUI trigger slider which can be used instead of a button, e.g. in a situation where the

Dominik Butz 3 Aug 1, 2022
This is an iOS Tweak that modifies the brightness slider in the Control Center.

AdvancedBrightnessSlider Tweak This is an iOS Tweak that modifies the brightness slider in the Control Center. Even with dark mode toggled on, I found

Jonas Schiefner 15 Oct 22, 2022
Use UIResponder to imitate an iOS slider.

WWSlider Use UIResponder to imitate an iOS slider. 使用UIResponder仿造一個iOS的滑桿. Installation with Swift Package Manager dependencies: [ .package(url:

William-Weng 2 May 5, 2022
VolumeControl is a custom volume control for iPhone featuring a well-designed round slider.

#VolumeControl VolumeControl is a custom volume control for iPhone featuring a well-designed round slider. Preview Usage // Include VolumeControl.h in

12Rockets 81 Oct 11, 2022