Sliders-SwiftUI

The Sliders framework provides a collection of fully stylable, drag-based SwiftUI controls designed to replace or extend the standard SwiftUI Slider.

Key features include:

• Full Styling: Every component uses a style protocol, allowing independent customization of the thumb, track, tick marks, and floating labels.
• Spatial Adaptability: Controls scale to their containers and accept an angle parameter for horizontal, vertical, or diagonal placement.
• Tick Marks & Haptics: Supports evenly-spaced, step-spaced, or arbitrary tick marks with iOS haptic feedback.
• Magnetic Affinity Snapping: An optional behavior where the thumb snaps to nearby tick marks and requires a deliberate extra drag to break free.

The library provides a variety of specialized drag-based controls:

• LSlider: A linear slider that works at any angle.
• DoubleLSlider: A linear range slider with two thumbs.
• RSlider: A circular slider with a thumb traveling around an arc.
• DoubleRSlider: A circular range slider with two thumbs.
• TrackPad: A 2-D slider mapping horizontal/vertical drag to two values.
• RadialPad: A joystick-style 2-D control that retains position.
• Joystick: An on-screen joystick that appears at the drag location.
• PSlider: A slider where the thumb travels along a custom SwiftUI Shape path.
• OverflowSlider: A meter-style slider with velocity gestures.

RSlider is a circular slider for SwiftUI where the thumb moves around a circular track to update a bound Double value. It supports partial or multiple rotations, tick marks, magnetic affinity snapping, and haptic feedback.

@State private var value = 0.5

RSlider($value)
    .frame(width: 180, height: 180)

JoyState is an enumeration representing the joystick's lifecycle:

• .inactive: The joystick is hidden.
• .locked: The joystick is locked in place after a drag ended inside the lock-box.
• .dragging(time:translation:startLocation:velocity:acceleration:): The user is actively dragging.

Computed Properties

You can access the following properties on a JoyState value to drive your application logic:

• isActive: true when dragging or locked.
• isLocked: true when locked.
• isDragging: true when actively dragging.
• angle: The Angle from the center to the thumb.
• radialOffset: The Double distance from the center to the thumb.
• translation: The current CGSize drag translation.
• velocity: The current CGSize drag velocity.
• acceleration: The current CGSize drag acceleration.

Haptic feedback is powered by CoreHaptics and is available on iOS. It triggers each time the thumb passes over a tick mark.

Requirements:

• tickMarkSpacing must be configured (not nil).
• hapticFeedbackEnabled must be true (default).

On platforms without CoreHaptics support, calls are silently ignored. To disable haptics, set hapticFeedbackEnabled: false.

When affinityEnabled is set to true and tickMarkSpacing is configured, thumbs will magnetically snap to the nearest tick mark when they enter the affinityRadius.

To break free from a snap, the user must drag the thumb beyond the affinityRadius plus the affinityResistance distance.

DoubleLSlider(
    lowerValue: $lower,
    upperValue: $upper,
    range: 0...1,
    keepThumbInTrack: true,
    trackThickness: 20,
    tickMarkSpacing: .count(11),
    affinityEnabled: true,
    affinityRadius: 0.03,
    affinityResistance: 0.015
)
.frame(height: 60)

TrackPad displays a floating label above the thumb that updates live. You can provide a custom view builder to control the label's appearance.

Custom Label View

Use a trailing closure to define the label content, receiving the current x and y values:

@State var point = CGPoint(x: 0.5, y: 0.5)

TrackPad($point, rangeX: -1...1, rangeY: -1...1) {\
    Text(String(format: "x: %.2f  y: %.2f", x, y))
}
.frame(height: 260)

Hiding Labels

Use the .labelsVisibility(_:) modifier to hide the label entirely:

TrackPad($point)
    .labelsVisibility(.hidden)
    .frame(height: 260)

You can integrate Sliders into your Xcode project using Swift Package Manager (SPM).

Via Xcode UI

1. Go to File → Add Package Dependencies.
2. Paste the repository URL: https://github.com/kieranb662/Sliders-SwiftUI.
3. Select your minimum version requirement and add the package to your target.

Via Package.swift

Add the dependency directly to your Package.swift file:

dependencies: [
    .package(url: "https://github.com/kieranb662/Sliders-SwiftUI", from: "1.0.0")
]

All controls follow a consistent styling pattern: implement a style protocol and apply it using a specific modifier. Style modifiers cascade through the view hierarchy, meaning applying a modifier to a container will style all compatible sliders within that container.

// Apply a custom style to every LSlider in a container
VStack {
    LSlider($red,   range: 0...1)
    LSlider($green, range: 0...1)
    LSlider($blue,  range: 0...1)
}
.linearSliderStyle(MyLSliderStyle())