Swiftpack.co - kwiessle/Dragger as Swift Package

Swiftpack.co is a collection of thousands of indexed Swift packages. Search packages.
See all packages published by kwiessle.
kwiessle/Dragger 1.0.3
A Customizable Drag Slider swiftUI view
⭐️ 6
🕓 4 weeks ago
iOS macOS
.package(url: "https://github.com/kwiessle/Dragger.git", from: "1.0.3")


A customizable SwiftUI Dragger view.


In Xcode add https://github.com/kwiessle/Dragger.git in your package dependencies.


import SwiftUI
import Dragger

struct ContentView: View {
    @State var isComplete: Bool = false
    var body: some View {
        Dragger(isComplete: $isComplete)

Create your own style

By default the Dragger style mimics the iOS Toggle's design, but you can create your own !
A Dragger view is represented by three components: Body, Track and Thumb

1 - Create a struct and make it conforms to the DraggerStyle protocol
2 - Provide layout constants for insets, thumbSize and trackHeigth
3 - Provide your own view implementation for each component

struct MyCustomStyle: DraggerStyle {
    var insets: CGFloat = 5
    var thumbSize: CGSize = CGSize(width: 46, height: 46)
    var trackHeight: CGFloat = 50
    func makeBody(configuration: Configuration) -> some View {
    func makeTrack(configuration: Configuration) -> some View {
        LinearGradient(colors: [.pink, .purple, .blue], startPoint: .topLeading, endPoint: .bottomTrailing)
            .opacity(3 * configuration.fractionComplete)
    func makeThumb(configuration: Configuration) -> some View {
            .rotationEffect(.radians(2 * .pi * configuration.fractionComplete))
            .foregroundColor(configuration.isComplete ? .green : .red)


Provides real time access of Dragger's state values

  • configuration.isComplete: The current state of the dragger
  • configuration.fractionComplete: The current progress amount of the thumb
  • configuration.isHoldingThumb: Tells if the user is holding the thumb

4 - Pass your style to the dragger using .dragerStyle() modifier.

    var body: some View {
        Dragger(isComplete: $isComplete)

Layout overview


  • The final heigth of the dragger view is computed from the configuration's .insets and .trackHeight.
  • If the provided thumb size height lower than the track height the Dragger will add horizontal padding in order to center the thumb.


Stars: 6
Last commit: 4 weeks ago
Advertisement: IndiePitcher.com - Cold Email Software for Startups

Swiftpack is being maintained by Petr Pavlik | @ptrpavlik | @swiftpackco | API | Analytics