sl-multi-range component

[mpharoah]

Implements https://github.com/shoelace-style/shoelace/issues/616 Currently, Shoelace implements an sl-range component for a simple slider with one value.

This pull request is a prototype for a new similar component that differs in that it supports more than one value/handle. The most common use case is using two values to select a range, but the component supports an arbitrary number of handles.

There aren't any unit tests, but everything else is now implemented

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
shoelace	✅ Ready (Inspect)	Visit Preview	Mar 25, 2024 10:24pm

[claviska]

Thanks for the suggestion! To save yourself effort in the future, it's almost always best to open a discussion to talk about potential new features before doing the work :)

That said, I don't think a slider with multiple thumbs is out of the question, but we'll probably want to incorporate it into a single component. The biggest question about supporting this was how do we handle form submissions? The control will have one name, so the value will probably have to be delimited, e.g. 12,74 or 12,74,98 for multiple thumbs.

Pinging @KonnorRogers since he's done some work with vertical sliders before, which is another feature we'd like to add. Of course, it will require a rewrite of the existing component. Perhaps we can use @mpharoah's work as a baseline or at least for inspiration when that time comes.

[mpharoah]

Thanks for the suggestion! To save yourself effort in the future, it's almost always best to open a discussion to talk about potential new features before doing the work :)

No problem. I needed this component for my site anyway, so I had to do the work either way. Just figured I might as well contribute what I had done back to Shoelace since porting from my component to Shoelace was pretty trivial.

I'll try to get tooltips added since that would be a nice-to-have for me, then I'll leave this here for you to do whatever you want with it, if anything

[mpharoah]

Okay, tooltips work now. Aside from missing HTML Form integration and css parts, it should now have everything it needs. There's definitely some code style differences between this PR and other Shoelace components (ie. using actual private members, css names, and using willUpdate instead of @watch), but the actual functionality shouldn't need to change much if at all if you want to officially bring this into Shoelace at a later point.

[schilchSICKAG]

We currently also have the requirement of adding a slider with multiple knobs. I think this version looks quite promising. However, we would also like to have various other options like:

• Knobs should be their own component (e.g. sl-multi-range-knob) that can be slotted into the sl-multi-range. This would make usage more declarative and you would be free to add as many knobs as you want. See Spectrum Web Components for an example of this where the knobs even handle collision detection and boundaries, making the component sl-multi-range-knob more lightweight.
• It would also be nice to have the possibility to set an unlimited number of tick markers. This would allow the user to either go with another scale as a default linear one.

Is there any way we could support from our side to make this component land in shoelace?

@claviska @mpharoah

[claviska]

Knobs should be their own component (e.g. sl-multi-range-knob) that can be slotted into the sl-multi-range

This feels like a premature abstraction. The knob will be a single element with a handful of styles. Making it a full blown component would be overkill and result in more bytes for little perceived benefit. What's your use case for it?

It would also be nice to have the possibility to set an unlimited number of tick markers.

Noted, thanks. We haven't begun to properly scope this feature out, but this will be helpful during that phase.

Is there any way we could support from our side to make this component land in shoelace?

We're currently focusing on the Web Awesome alpha early release for Kickstarter backers, so this is on pause for the moment. @KonnorRogers has already done the work internally to move Shoelace form controls to form-associated elements in Web Awesome, so this PR is behind because it lacks our new base class and utilities to make it a first-class form control.

We'll get there. Lots going on right now. Thanks for your patience!

[mbaas2]

Hey @claviska , that's awesome. I'm just another guy that nearly sent an email asking for dual-thumbs. I'm happy to see there might be a real chance of if beimg added to wa!👍

[schilchSICKAG]

In the meantime, we have used the solution from @mpharoah (thank you for this ❤️!) as a base for our own component. It adds some bugfixes and a11y/usability improvements over the original version, if someone wants to take a look:

Demos: https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs Code: https://github.com/synergy-design-system/synergy-design-system/blob/main/packages/components/src/components/range/range.component.ts