ModernSlider

KO | EN

gitlite — search

#typescript #ai-agents #ai #dsh-plugin #deepseek-harness #open-source #cli #claude-code #codex #developer-tools #react #windows

★ 46 Open GitHub ↗

A modern and customizable SwiftUI slider component

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# ModernSlider

![ModernSlider Image](https://github.com/arjun-dureja/ModernSlider/blob/main/Assets/hero-image.png)

[![Swift](https://img.shields.io/badge/swift-orange.svg)](https://swift.org)
[![GitHub stars](https://img.shields.io/github/stars/arjun-dureja/ModernSlider.svg)](https://github.com/arjun-dureja/ModernSlider/stargazers)
[![GitHub license](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/arjun-dureja/ModernSlider/blob/main/LICENSE)
[![Platform](https://img.shields.io/badge/platform-iOS%20|%20macOS%20|%20iPadOS-blue.svg)](https://developer.apple.com)

`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.
1. Go to File > Add Packages.
1. Enter the repository URL: https://github.com/arjun-dureja/ModernSlider
1. Select the ModernSlider package and add it to your project.

---

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

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

## Usage

First, import the ModernSlider package in your SwiftUI view:

```swift
import ModernSlider
```

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

```swift
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:

```swift
ModernSlider(
    "Volume",
    systemImage: "speaker.wave.2.fill",
    sliderWidth: 300,
    sliderHeight: 30,
    sliderColor: .blue,
    value: $volume
)
```
<img src="https://github.com/arjun-dureja/ModernSlider/blob/main/Assets/example-2.gif" width="400" />

No title:
```swift
ModernSlider(
    systemImage: "circle",
    value: $value
)
```
<img src="https://github.com/arjun-dureja/ModernSlider/blob/main/Assets/example-3.gif" width="400" />

## API Reference

### ModernSlider

```swift
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](https://github.com/arjun-dureja/ModernSlider/blob/main/LICENSE) file for more info.

ModernSlider

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README