spacenation / swiftui-sliders Goto Github PK
View Code? Open in Web Editor NEW:rocket: SwiftUI Sliders with custom styles
License: MIT License
:rocket: SwiftUI Sliders with custom styles
License: MIT License
Hi, thanks for creating such a customizable control!
Sometimes it is helpful to have more precise step adjustments, such as 0.1 if 0.5 was the step value. Would it be possible to have an option to have an alternative step value on pressing the option modifier key?
With NSSlider on macOS, you can click on the slider track to move the thumb to the clicked position. When running on macOS, these sliders should do the same.
As mentioned in #6 RangeSliders should have a minimum selectable range option.
This will enable support for styles to match behaviour of other SwiftUI native elements (Buttons, Pickers, Toggles)
User should be able to specify slider styles.
.valueSliderStyle(...)
.rangeSliderStyle(...)
.pointSliderStyle(...)
This will use makeBody method
func makeBody(configuration: Self.Configuration) -> Self.Body
This will also rename current slider types to
ValueSlider()
RangeSlider()
PointSlider()
with geometry and interactions moving to styles
HorizontalValueSliderStyle() // Default
VerticalValueSliderStyle()
...
I'm making a progress bar video timeline, I need to catch change events
I have a minimal slider with a small thumb size (8x8) but a 36x36 interactive thumbsize.
I have the options set to [.interactiveTrack]
I notice that a tap on the track works great, but a drag updates the track value after a second on so, without any smoothness.
Love the project! Wondering (as my title suggests) if there are any other examples usages of this library or documentation somewhere? I've successfully hacked my way to getting a value slider working the way I wanted, but I'm having a hard time figuring out the range slider.
Thank you for this project!
RangeSlider(range: $model.range2)
.rangeSliderStyle(
HorizontalRangeSliderStyle(
track:
HorizontalRangeTrack(
view: Capsule().foregroundColor(.purple)
)
.background(Capsule().foregroundColor(Color.purple.opacity(0.25)))
.frame(height: 8),
lowerThumb: Circle().foregroundColor(.purple),
upperThumb: Circle().foregroundColor(.purple),
lowerThumbSize: CGSize(width: 32, height: 32),
upperThumbSize: CGSize(width: 32, height: 32),
options: .forceAdjacentValue
)
)
This is what's rendered:
Used a simple example:
RangeSlider(range: $range)
.rangeSliderStyle(
HorizontalRangeSliderStyle(
track:
HorizontalRangeTrack(
view: Capsule().foregroundColor(.purple)
)
.background(Capsule().foregroundColor(Color.purple.opacity(0.25)))
.frame(height: 8),
lowerThumb: Circle().foregroundColor(.purple),
upperThumb: Circle().foregroundColor(.purple),
lowerThumbSize: CGSize(width: 32, height: 32),
upperThumbSize: CGSize(width: 32, height: 32),
options: .forceAdjacentValue
)
)
But the thumbs don't show. Any ideas?
Hi, I'm using this library to create a RangeSlider but I have a problem. When I move the lower thumb and it reaches the position of upper thumb instead of stop the movement, the lower thumb pushes the upper thumb (see the attached video). I think this behavior is not natural on app development. Is there a way to fix it?
Thanks for this project, can you add the step property, for example, adding five for each step or movement?
Hi. First of all, thank you for an awesome library!
A quick question:
How do I specify a minimum selectable range for an HRangeSlider? Couldn't find it in the options.
Its just a waste....
There are tutorials available for how to make a star rating UI component, but I'm really hoping to do something a little more complicated, and I think it's going to require handling the rating as a slider (with an invisible knob).
My idea is that the "bar" will be a row of five stars and then sliding along it results in this:
0.0 = "star" x 5
0.5 = ("star.leadinghalf.fill" x 1) + ("star" x 4)
1.0 = ("star.fill" x 1) + ("star" x 4)
1.5 = ("star.fill" x 1) + ("star.leadinghalf.fill" x 1) + ("star" x 3)
.. and so forth up to ("star.fill" x 5)
I've tried altering your sliders to do something like this, and clearly I did it wrong because any attempt to "slide" along the row resulted in the row of stars changing position on the screen.
Is this something that should be handled as a slider, or should I instead perhaps handle it so that each star is a button that starts at "star (empty)" and changes to "star.leadinghalf.fill" the first time it's tapped, and then to "star.fill" if it's tapped again, before cycling back to being empty?
Example project does not compile
I am using this library for range slider in my project for age range. now i want minimum 5 years of difference in between minimum age and maximum selected i am unable to find any thing regarding this.
Crash when track is used in modal view
HTrack(value: value, view:
Capsule().foregroundColor(.accentColor)
)
Workaround:
HTrack(value: value, view:
Capsule().foregroundColor(.accentColor)
)
.accentColor(.accentColor)
I can't get this to compile: If I take out onEditingChange it will compile.
RangeSlider(range: $range)
.rangeSliderStyle(
HorizontalRangeSliderStyle(
track:
HorizontalRangeTrack(
view: Capsule().foregroundColor(Color("TPOrange"))
)
.background(Capsule().foregroundColor(Color("TPOrange").opacity(0.30)))
.frame(height: 8),
lowerThumb: Circle().foregroundColor(Color(UIColor(named: "TPLightGrey")!)),
upperThumb: Circle().foregroundColor(Color(UIColor(named: "TPLightGrey")!)),
lowerThumbSize: CGSize(width: 32, height: 32),
upperThumbSize: CGSize(width: 32, height: 32),
options: .forceAdjacentValue,
onEditingChanged: {
value in
if !value {
self.queryCallback()
}
}
)
).padding([.horizontal]).frame(height: 64)
In a case of the right hand not talking to the left hand... the right thumb of the bottom-most range slider in the horizontal sliders example loses track of where it's meant to be located when the left thumb gets moved. This is happening in a blank project with swiftui-sliders using Swift 5.4 and Xcode 12.4.
Depends on spacenation/swiftui-shapes#2 , swift-extensions/swiftui-extensions#54
How to set pre defined value of range lower and upper bounds ?
It would be great to be able to set a minimumDistance (DragGesture) for the RangeSlider.
Hey,
any chance that you can explain, how to use an horizontal slider in a horizontal Scrollview? If I intend to drag the slider, the ScrollView starts to scroll. Attaching some of the .gesture modifiers to the ValueSlider View did not help either - there is a very big chance, I'm doing something totally wrong here :D ...
Range 0.0 ... 1.0
Very simple. As the title with a value beyond the range the thumb goes beyond. Here a comparison with system sliders that stops at the end. Problem found only with MacOS Monterey Beta 6 (21A5506J).
In addition the Resources
and Examples
folders in Package are missing.
Hi, with RTL languages the slider slide on the opposite direction, if you want to try it:
.environment(\.layoutDirection, .rightToLeft)
First of all, thanks for the awesome library. Would love to see more examples of usage. I'm trying to set different track colors for active (left of thumb) and inactive (right of the thumb) parts. How can I do that? Any help is appreciated.
Hello,
I added the package to my project. When on xCode 13.0, I get errors saying "Ambiguous use of 'accentColor'". Maybe Color.accentColor should be used instead of just .accentColor in the source code when using .accentColor as a parameter call. Could you please resolve this?
Kind Regards,
Stefan
I would like to use a range slider to select an Age range within the 18 years old - 80 years old.
How do I define a custom range for the sliders?
I have an empty app running the swiftui-sliders examples and have noticed that I am unable to modify the track background colours on any slider without losing the track foreground colour. I'm on Swift 5.4 using XCode 12.4
Also... changing the app's accentColor works to change the track foreground color of Swift's default slider (included at the top of your horizontal slider examples) but has no impact on the swiftui-sliders themselves. I don't know if this is expected behaviour.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.