Add labels to ticks in Range Slider

[SebasF1349]

Describe what feature you'd like. Pseudo-code, mockups, or screenshots of similar solutions are encouraged!

Add labels to the ticks in the Range Slider component as shown in the pic below

What type of pull request would this be?

Enhancement

Any links to similar examples or other references we should review?

As discussed in Discord this will require add some styles to the datalist and options.

MDN documentation

Suggestion by Chris:

1. Create a new prop labels: boolean = false
2. Use <datalist class:labels={labels} to conditionally add a .labels class
3. Then locally (within the component) add a <style> tag and add the required classes there.

After some testing, I arrived to these styles that work in my case:

.labels {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 0.1rem; <!-- This px was found by trial and error for my case, didn't found the exact value used for the ticks -->
    padding-right: 0.1rem; <!-- This px was found by trial and error for my case, didn't found the exact value used for the ticks -->
}

Also the option needs a pt-1 to separate to the slider.

This creates the Range Slider in the pic at the top, but needs more testing.

Finally, it would probably be nice to add the option to add text labels for other use cases. Something like labels: "none" | "numbers" | string[] = "none"

If you want, I can work on this, test it and create a pr to review later this week.

[endigo9740]

@SebasF1349 I'm having a hard time describing how I envision this working. I think part of it is that I'm trying to describe what to remove and then replace in your PR. Would you mind terribly if we close the PR, then I take a stab at making the change directly in a new PR I generate?

Sometimes I'm just better at showing than telling, and in this case the showing would involve doing most if not all the work. We can still keep your PR for reference in case my ideas don't pan out, and of course I'd welcome your review when I have something to show.

Let me know!

[SebasF1349]

No problem at all. My pr was just a draft with some ideas (and some are not even working as it should), so just close it.

[endigo9740]

Sebas' PR for future reference: https://github.com/skeletonlabs/skeleton/pull/1069

[Moozdzn]

while on the subject of ticks (can open a different issue if needed) allowing custom tickmarks would be a nice feature.

Turning this:

Into this:

[endigo9740]

@Moozdzn go ahead and keep this request here. We'll review both requests in parallel when we return to this. Thanks!

[endigo9740]

In an effort to prepare for Skeleton v3, we're consolidate some related issues down to a single ticket. This will ensure that we can see the full context of requests when the time comes to refactor and update this feature going forward. If you wish to add additional feedback or suggestions, please so here:

• https://github.com/skeletonlabs/skeleton/issues/2367