SwiftUI Sliders with custom styles

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)

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?

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.

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.

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?

https://user-images.githubusercontent.com/13442110/143972064-c740edbd-b02e-45e9-a150-20633b3f7b85.mov

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 andExamples folders in Package are missing.

slider-range-bug.swift.zip

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:

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?

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.

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.

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?

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!

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.

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