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

* vertical values track
Latest commit 4bed548 Sep 16, 2019
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 Tracks (#55) Sep 5, 2019

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

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


Local modifiers

    range: $range,
    trackView: RoundedRectangle(cornerRadius: 16),
    valueView: LinearGradient(gradient: Gradient(colors: [.yellow, .orange, .red]), startPoint: .leading, endPoint: .trailing),
    thumbView: HalfCapsule()
/// Thumb
.thumbSize(CGSize(width: 16, height: 24))
/// Value
/// Track
/// Style

Apply scope-wide styles


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())


  • 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.


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.