feat: add change event on rangeslider

[percybolmer]

This PR adds change events to fire from the RangeSlider.

Also adds two options
display_values - When set to true always displays values
display_limits - When set to true always displays MIN/MAX at the top corners

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
svelte-ux	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 1, 2023 6:19am

[what-the-diff]

PR Summary

• Added Interactive Event Handling in RangeSlider Component
  Increased the component's interactivity by allowing it to handle 'change' events, that is, it can respond when the range of the slider is adjusted.

• Introduction of Display Values and Limits
  The RangeSlider component has been enhanced with 'display_values' and 'display_limits' properties. They provide more control and make the user interface more informative by letting users see the specified minimum and maximum values.

• Event Trigger When Slider Value Changes
  The system now dispatches a 'change' event whenever the slider value sees alterations, increasing responsiveness and allowing other parts of the application to react accordingly.

• Examples to Use New Properties in RangeSlider Component
  For aiding our user community, examples showcasing usage of the newly introduced 'display_values' and 'display_limits' properties in the RangeSlider component have been incorporated into the '+page.svelte' documentation.

[techniq]

Thanks @percybolmer. I left a few comments. Also, full disclosure, I'm not overlay happy with how this component is currently implemented, and is likely going to be reworked (and at least renamed to MultiRangeInput). See this issue for some of my thoughts. It also has a few bugs I'm aware of.

I recently added RangeField but it's only single value, and also not documented (not finished). It's mostly used for some doc examples ATM (and needs to be refined, and the range styled.

[percybolmer]

I see!

I gotta say that I love that svelte UX provides a RangeSlider instead of only a Single value slider!

[techniq]

Yeah, I like it, just needs some TLC, and been low on my priority list. Btw, if this one doesn't fit your needs (for now), you might want to take a look at https://github.com/simeydotme/svelte-range-slider-pips. I definitely want to get this impl. working great through (and improve the accessibility further).

[techniq]

@percybolmer I'm going to close this for now, but feel free to re-open and rebase off main once #167 is merged