Skip to content
🚀 SwiftUI Sliders with custom styles
Swift
Branch: master
Clone or download
ay42 ValuesTracks (#69)
* horizontal values track

* vertical values track
Latest commit 4bed548 Sep 16, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Examples ValuesTracks (#69) Sep 16, 2019
Resources Shapes (#40) Aug 31, 2019
Sources ValuesTracks (#69) Sep 16, 2019
.gitignore gitignore Jul 28, 2019
LICENSE Create LICENSE Sep 5, 2019
Package.swift Tracks (#55) Sep 5, 2019
README.md Tracks (#55) Sep 5, 2019

README.md

SwiftUI horizontal and vertical sliders for value and range.

SwiftUI Sliders with custom styles for iOS, macOS and Mac Catalyst.

How to use

Add this swift package to your project

git@github.com:spacenation/sliders.git

Import and use

import Sliders
import SwiftUI

struct ContentView: View {
    @State var value = 0.5
    @State var range = 0.2...0.8
    
    var body: some View {
        Group {
            HorizontalValueSlider(value: $value)
            VerticalRangeSlider(range: $range)
        }
    }
}

For more examples open /Examples/SlidersExamples.xcodeproj

Customizations

Local modifiers

HorizontalRangeSlider(
    range: $range,
    trackView: RoundedRectangle(cornerRadius: 16),
    valueView: LinearGradient(gradient: Gradient(colors: [.yellow, .orange, .red]), startPoint: .leading, endPoint: .trailing),
    thumbView: HalfCapsule()
)
.height(60)
.thickness(8)
/// Thumb
.thumbSize(CGSize(width: 16, height: 24))
.thumbColor(.red)
.thumbCornerRadius(8)
.thumbBorderColor(.white)
.thumbBorderWidth(1)
.thumbShadowColor(.black)
.thumbShadowRadius(3)
.thumbShadowX(1)
.thumbShadowY(0)
/// Value
.valueColor(.blue)
/// Track
.trackColor(.black)
.trackBorderColor(.yellow)
.trackBorderWidth(1)
/// Style
.sliderStyle(
    PlainSliderStyle()
)

Apply scope-wide styles

manySlidersView
    .sliderStyle(
        YourSliderStyle()
    )

Environment Values

view.environment(\.sliderStyle.height, 44)
view.environment(\.sliderStyle.thickness, 3)
view.environment(\.sliderStyle.thumbSize, CGSize(width: 16, height: 24))
view.environment(\.sliderStyle.thumbColor, .red)
view.environment(\.sliderStyle.thumbBorderColor, .blue)
view.environment(\.sliderStyle.thumbBorderWidth, 1)
view.environment(\.sliderStyle.thumbShadowColor, .black)
view.environment(\.sliderStyle.thumbShadowRadius, 2)
view.environment(\.sliderStyle.thumbShadowX, 1.5)
view.environment(\.sliderStyle.thumbShadowY, 1.5)
view.environment(\.sliderStyle.valueColor, .blue)
view.environment(\.sliderStyle.trackColor, .green)
view.environment(\.sliderStyle.trackBorderColor, .grey)
view.environment(\.sliderStyle.trackBorderWidth, 2)

view.environment(\.sliderStyle, PlainSliderStyle())

SDKs

  • iOS 13+
  • Mac Catalyst 13.0+
  • macOS 10.15+
  • Xcode 11.0+

Version 1.0.0

Stable version will be released as soon as XCode 11 GM becomes available. We will strictly follow semantic versioning moving forward.

Contibutions

Feel free to contribute via fork/pull request to master branch. If you want to request a feature or report a bug please start a new issue.

You can’t perform that action at this time.