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.


View Github