ModernSlider

ModernSlider is a customizable slider component for SwiftUI, inspired by the macOS Control Center sliders, that provides a sleek and modern interface for selecting values from a range.

Features

• Customizable range, width, height, system image, and color
• Optional title with a background view
• Smooth sliding animation
• Callbacks for value changes and drag end events
• Support for light and dark mode

Requirements

• iOS 14.0+
• macOS 11.0+
• Mac Catalyst 15.0+

Installation

Swift Package Manager

To add ModernSlider to your project, follow these steps:

1. Open your project in Xcode.
2. Go to File > Add Packages.
3. Enter the repository URL: https://github.com/arjun-dureja/ModernSlider
4. Select the ModernSlider package and add it to your project.

---

Alternatively, add the following to your Package.swift file:

dependencies: [
    .package(url: "https://github.com/arjun-dureja/ModernSlider.git", from: "1.0.0")
]

Usage

First, import the ModernSlider package in your SwiftUI view:

import ModernSlider

Then, you can use the ModernSlider in your SwiftUI views:

struct ContentView: View {
    @State private var sliderValue = 50.0

    var body: some View {
        ModernSlider(
            "Brightness",
            systemImage: "sun.max.fill",
            value: $sliderValue,
            in: 5...100,
            onChange: { newValue in
                print("Slider value changed to \(newValue)")
            },
            onChangeEnd: { finalValue in
                print("Sliding ended with value \(finalValue)")
            }
        )
    }
}

Customization

ModernSlider offers various customization options:

Custom image, width, height, and color:

ModernSlider(
    "Volume",
    systemImage: "speaker.wave.2.fill",
    sliderWidth: 300,
    sliderHeight: 30,
    sliderColor: .blue,
    value: $volume
)

No title:

ModernSlider(
    systemImage: "circle",
    value: $value
)

API Reference

ModernSlider

public init(
    _ title: String? = nil,
    systemImage: String,
    sliderWidth: CGFloat = 250,
    sliderHeight: CGFloat = 25,
    sliderColor: Color = .white,
    value: Binding<Double>,
    in range: ClosedRange<Double> = 0...100,
    onChange: ((Double) -> Void)? = nil,
    onChangeEnd: ((Double) -> Void)? = nil
)

Parameters

• title: An optional string to describe the data the slider represents.
• systemImage: A string representing the system image name for the slider thumb.
• sliderWidth: The width of the slider track. Defaults to 250.
• sliderHeight: The height of the slider track and thumb. Defaults to 25.
• sliderColor: The color of the slider's fill and thumb. Defaults to white.
• value: A binding to the current value of the slider.
• range: A closed range representing the minimum and maximum values for the slider. Defaults to 0...100.
• onChange: An optional closure that is called when the slider value changes.
• onChangeEnd: An optional closure that is called when the dragging ends.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

ModernSlider is available under the MIT license. See the LICENSE file for more info.