An iOS-16-styled slider.

Overview

Slyderin

An iOS-16-styled slider.

Available on iOS 13 and later.

Slyderin.Demo.mov

How to Use

Include it with Swift Package Manager.

Add it to your view:

import Slyderin
class ViewController: UIViewController {   
    private weak var slider: Slyder!
	// ......
    func loadView() {
        super.loadView()
        let slider = Slyder()
        view.addSubview(slider)
        // your layout code......
    }
	// ......
}

The size of the Slyder is not intrinsic. And it includes a default 20px margin on each side of the slider to increase the touch area, which cause the slider to be insetted. You can change it by changing its directionalLayoutMargins.

Use valueChangeHandler or call onValueChange(_:) to receive value changes:

Slyder()
    .height(50)
    .onValueChange {
		// new value $0 received
    }

Slyder supports 2 different modes of tracking, you can specify it when initializing:

Slyder(options: [.trackingBehavior()])
  • The default tracking behavior is .trackMovement, which means the slider value changes according to the finger movements distance on the slider's direction.
  • The other mode is .trackTouch(respondsImmediately: Bool). In this mode, the thumb (the filled track) moves to where the finger is. If respondsImmediately is true, the value changes immediately when the user put the finger down onto the slider. Otherwise the value won't change until the user moves the finger.

Make Your Own Slyder

You can specify a slider when initializing Slyder, as long as it is Slidable:

init(slider: Slidable = DefaultSlider(), options: [Option] = [])

UIKit values

Slyder respects some of the standard UIKit parameters:

  • tintColor changes the color of the filled track. Inherited from the superview by default.
  • directionalLayoutMargins determines the slider's margins from its touch-responsive area. Defaults to 20px each side.
  • semanticContentAttribute determines whether the slider should flip when the interface layout direction is right-to-left. Defaults to unspecifed, which means it flips. Changes to this value won't apply until the next time the Slyder is added to superview.
  • overrideUserInterfaceStyle determines the blur effect is light or dark, if you have not specify a light or dark one.

Parameters of the default slider

Slyderin uses Slyderin.ThumblessSlider by default. You can change its initializer's parameters to more-or-less do some customizations:

Slyder(
    slider: ThumblessSlider(
        direction: .bottomToTop,
        scaleRatio: ThumblessSlider.ScaleRatio(ratioOnAxis: 1.05, ratioAgainstAxis: 1.15),
        cornerRadius: .fixed(12),
        visualEffect: UIBlurEffect(style: .systemMaterialDark)
    )
)
  • direction determines how whether the slider is horizontal or vertical and which way the track is filled, e.g.,:
    • leadingToTrailing. The slider is horizontal and the track is filled from the leading side to the trailing side when the user slides in leading-to-trailing direction. This is the default direction.
    • bottomToTop. The slider is vertical and the track is filled from bottom to top when the user slides upwards.
  • scaleRatio. The slider expands its size when responding to user inputs. This parameter specifies the expanding ratio.
    • Defaults to 1.05 on the axis of the direction, and 2.0 against the axis. Which, for a horizontal slider, its width expands 1.05 times and its height becomes 2.0 times.
  • cornerRadius provides 2 different modes of corner radius:
    • full, the corner radius equals half the length against the direction's axis. For a horizontal slider with a height of 20px, the corner radius is 10px.
    • fixed(CGFloat), a fixed corner radius.
  • visualEffect specifies the visual effect of the unfilled track.

There is an animation parameter on the way.

A built-in UISlider

There is also a built-in UISlider subclass: Slyderin.UIKitSlider, which, unfortunately, supports only the leading-to-trailing direction:

Slyder(slider: UIKitSlider())
Built-in.UISlider.mov

Your own implementation

You can implement your own Slidable:

public protocol Slidable: AnyObject where Self: UIView {
    var direction: Direction { get }
    func fit(_ viewModel: Slyder.ViewModel)
}

extension Slyder {
    public struct ViewModel {
        public var maximumValue: Double = 1
        public var minimumValue: Double = 0
        public var value: Double = 0
        public var interacting: Bool = false
    }
}

Slidable is a simple protocol. Your implementation should provides the direction it supports (or support multiple directions) and update itself according to the value changes.

You might also like...
🎚️ 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.

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.

A reusable Slider View made with SwiftUI
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

Custom & highly configurable seek slider with sliding intervals, disabled state and every possible setting to tackle!
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

TriggerSlider is a simple SwiftUI trigger slider
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

VolumeControl is a custom volume control for iPhone featuring a well-designed round slider.
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

Simple and light weight slider with chapter management
Simple and light weight slider with chapter management

Simple and light weight slider with chapter management Demo Installation CocoaPods WESlider is available through CocoaPods. To install it, simply add

IntervalSlider is a slider library like ReutersTV app. written in pure swift.
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

A simple range slider made in Swift
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

CircleSlider is a Circular slider library. written in pure Swift.
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

Releases(0.0.2)
Owner
iMoeNya
iOS Developer
iMoeNya
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 Nov 21, 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 18 Jan 5, 2023
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
Customizable animated slider for iOS

MMSegmentSlider MMSegmentSlider is an easy-to-use IBDesignable animated slider for iOS 7+ written in Objective-C. Installation From CocoaPods CocoaPod

Max Medvedev 48 Jul 26, 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 577 Dec 15, 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 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 4, 2023
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
Customizable animated slider for iOS

MMSegmentSlider MMSegmentSlider is an easy-to-use IBDesignable animated slider for iOS 7+ written in Objective-C. Installation From CocoaPods CocoaPod

Max Medvedev 48 Jul 26, 2022