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

Ramotion

Last update: Dec 23, 2022

Related tags

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

Requirements

iOS 10.0
Xcode 9
Swift 4.0

Installation

You can install fluid-slider in several ways:

Add source files to your project.

Use CocoaPods:

pod 'fluid-slider'

Use Carthage:

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

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

opened by ankita94p 4

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

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

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

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

I am using code from your example project.

opened by mightymango 1
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.

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

Would be nice if someone could help.

opened by maybeniko 1
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

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

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