ClosedRangeSlider

A SwiftUI control for selecting a continuous range of numeric values with two draggable thumbs.

Features

• Two draggable thumbs for lower and upper bounds
• Support for both Double and Int ranges
• Configurable step increments for discrete values
• Minimum distance constraint between thumbs
• Customizable appearance (colors, sizes)
• RTL layout support
• VoiceOver accessibility support

Requirements

• iOS 18.0+
• macOS 26+
• Swift 6.2+

Installation

Swift Package Manager

Add the following to your Package.swift:

dependencies: [
    .package(url: "https://github.com/tomokisun/swiftui-closed-range-slider.git", from: "1.0.0")
]

Or add it via Xcode: File > Add Package Dependencies... and enter the repository URL.

Usage

Basic Usage

import ClosedRangeSlider

struct ContentView: View {
    @State private var price: ClosedRange<Double> = 20...60

    var body: some View {
        VStack(spacing: 24) {
            Text("Price: \(Int(price.lowerBound)) – \(Int(price.upperBound))")
            ClosedRangeSlider($price, in: 0...100, step: 1)
        }
        .padding()
    }
}

Integer Ranges

@State private var ageRange: ClosedRange<Int> = 18...65

ClosedRangeSlider($ageRange, in: 0...100, step: 1)

With Minimum Distance

Ensure a minimum gap between the two thumbs:

ClosedRangeSlider($range, in: 0...100, minimumDistance: 10)

Editing Callback

React to drag start and end events:

ClosedRangeSlider($range, in: 0...100) { isEditing in
    if isEditing {
        // User started dragging
    } else {
        // User finished dragging
    }
}

Customization

Tint Color

ClosedRangeSlider($range, in: 0...100)
    .rangeSliderTint(.orange)

Track Appearance

ClosedRangeSlider($range, in: 0...100)
    .rangeSliderTrackHeight(8)
    .rangeSliderTrackColor(.gray.opacity(0.3))

Thumb Appearance

ClosedRangeSlider($range, in: 0...100)
    .rangeSliderThumbSize(CGSize(width: 28, height: 28))
    .rangeSliderThumbColor(.blue)

Custom Value Formatter

For accessibility labels:

ClosedRangeSlider($range, in: 0...100)
    .rangeSliderValueFormatter { value in
        "$\(Int(value))"
    }

License

MIT License