spacenation / swiftui-sliders Goto Github PK

Is there an example repo with the different sliders?

I'm interested in recreating this slider specifically:

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)

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?

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

How to set pre defined value of range lower and upper bounds ?

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!

Example project does not compile

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.

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.

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?

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:

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)

It would be great to be able to set a minimumDistance (DragGesture) for the RangeSlider.

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.

Hi, with RTL languages the slider slide on the opposite direction, if you want to try it:

.environment(\.layoutDirection, .rightToLeft)

a state update would freeze the app

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?

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.

hey i just added this package to my project and i want to use Value Slider (normal Slider) here i am not getting any thumb for the slider to move

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

Thanks for this project, can you add the step property, for example, adding five for each step or movement?

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.

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'm making a progress bar video timeline, I need to catch change events

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?

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.

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?

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.

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.

slider-range-bug.swift.zip

Its just a waste....

Depends on spacenation/swiftui-shapes#2 , swift-extensions/swiftui-extensions#54

As mentioned in #6 RangeSliders should have a minimum selectable range option.