Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sanhee16/SwiftUIValueSlider
Custom SwiftUI Slider with Value
https://github.com/sanhee16/SwiftUIValueSlider
Last synced: about 2 months ago
JSON representation
Custom SwiftUI Slider with Value
- Host: GitHub
- URL: https://github.com/sanhee16/SwiftUIValueSlider
- Owner: sanhee16
- License: mit
- Created: 2023-04-12T01:23:15.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-04-12T05:55:46.000Z (over 1 year ago)
- Last Synced: 2024-10-31T15:54:42.434Z (2 months ago)
- Language: Swift
- Homepage:
- Size: 1.37 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-swiftui-libraries - SwiftUI Value Slider - SwiftUI Sliders with current value of thumb (Slider / Content)
README
# SwiftUIValueSlider
[](https://travis-ci.org/sanhee16/SwiftUIValueSlider)
[](https://cocoapods.org/pods/SwiftUIValueSlider)
[](https://cocoapods.org/pods/SwiftUIValueSlider)
[](https://cocoapods.org/pods/SwiftUIValueSlider)
This is a Slider created using SwiftUI, which allows you to display the slider's value at the top, and customize the color and size of the thumb and track.
## Example
To run the example project, clone the repo, and run `pod install` from the Example directory first.
## Requirements
iOS 14.0
## Installation
### CocoaPods
SwiftUIValueSlider is available through [CocoaPods](https://cocoapods.org). To install
it, simply add the following line to your Podfile:
```ruby
pod 'SwiftUIValueSlider'
```
### Swift Package Manager
```swift
.package(name: "SwiftUIValueSlider", url: "https://github.com/sanhee16/SwiftUIValueSlider.git", from: "0.1.0")
```
## Guide
### Basic
This is a basic ValueSliderView. You can set a closure for when the drag starts, when it's in progress, and when it ends.
```swift
@State var value: Double = 5.0
ValueSliderView($value)
.sliderFrame(width: gp.size.width - 60.0, height: 10.0)
.onStart {
print("on Start: \(value)")
}
.onDragging {
print("on dragging: \(value)")
}
.onEnded {
print("on End: \(value)")
}
.frame(width: gp.size.width, alignment: .center)
```
```swift
on Start: 5.6836461126005355
on dragging: 5.6836461126005355
on dragging: 5.674709289387148
on dragging: 5.647899637912617
on dragging: 5.630026809651474
on dragging: 5.621089986438086
on dragging: 5.576407506702412
on End: 5.576407506702412
```
### Tracker, Thumb
You can set the height of the slider bar. The height of the bar cannot be greater than the size of the thumb. If you set it larger, it will automatically be set to the size of the thumb.
You can change the color and size of the thumb, as well as the color of the track.
```swift
@State var value: Double = 0.0
ValueSliderView($value)
.thumb(thumbSize: 40.0, thumbColor: .blue)
.trackColor(minTrackColor: .red, maxTrackColor: .green)
.sliderFrame(width: gp.size.width - 60.0, height: 10.0)
.frame(width: gp.size.width, alignment: .center)
```
### Value
You can also set the current value of the slider. If isHidden is set to true, the value will not be displayed.
```swift
@State var value: Double = 0.0
ValueSliderView($value)
.range(sliderRange: -10...10)
.values(valueFormat: "%.2f", font: .system(size: 20, weight: .bold, design: .default), fontColor: .green, isHidden: false)
.sliderFrame(width: gp.size.width - 40.0, height: 10.0)
.frame(width: gp.size.width, alignment: .center)
```
```swift
@State var value: Double = 0.0
ValueSliderView($value)
.values(isHidden: true)
.sliderFrame(width: gp.size.width - 40.0, height: 10.0)
.frame(width: gp.size.width, alignment: .center)
```
### Range
You can set a range. The range can include both negative and positive values.
```swift
@State var value: Double = 0.0
ValueSliderView($value)
.range(sliderRange: -10...10)
.values(valueFormat: "%.2f", font: .system(size: 20, weight: .bold, design: .default), fontColor: .green, isHidden: false)
.sliderFrame(width: gp.size.width - 40.0, height: 10.0)
.frame(width: gp.size.width, alignment: .center)
```
### Disable
If you set isDisable to true, the slider will not be movable and its color will change to gray.
```swift
@State var value: Double = 5.0
ValueSliderView($value)
.isDisable(true)
.sliderFrame(width: gp.size.width - 40.0, height: 10.0)
.frame(width: gp.size.width, alignment: .center)
```
## Author
sanhee16, [email protected]
## License
SwiftUIValueSlider is available under the MIT license. See the LICENSE file for more info.