ModernSlider

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

★ 46

A modern and customizable SwiftUI slider component

ModernSlider Latest Version Download

Download Latest Version (.zip)

// 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

ModernSlider Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

ModernSlider

ModernSlider Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README