Uniquely styling multiple handles

[tonyketcham]

We're using this component in p5-svelte's docs to change x and y dimensions of a sketch and would like to be able to independently label each based on their index respective to the passed-in values array:

So that we could have two thumbs with the format: x: ..., y: ...

[tonyketcham]

Perhaps adding an optional second index parameter passed into handleFormatter would enable this type of functionality?

[simeydotme]

Hi @tonyketcham ... I believe I've already got this enabled... let me see if I can whip up a quick REPL :)

[simeydotme]

https://svelte.dev/repl/eb8df23e0eba47c6add9527eb5976f99?version=3.46.4
^ here you go.. is this what you were expecting? :)

There's also a fairly cool example on Codepen of it in use as a plain JS component which has custom handle formatting, too;
https://codepen.io/simeydotme/pen/KKNJdbK which was before I had implemented the index in handle formatter, I was using the change event to override the labels.

---

(p.s here's the commit where i arguement was added for the formatter; 556c4b8 and it is documented under handleFormatter in the readme :))

[tonyketcham]

@simeydotme this is fantastic - thank you for your amazing work; this is the best slider component I've ever come across in any framework

[rbrdl]

Hi,

I started writing my answer and thought I'd wait for after dinner so I can follow up, but this is way better, I only had a quick and dirty solution with basically this in RangeSlider.svelte:

export let prefixes = [];

{#if prefixes[index]}<span class="rangeFloat-prefix">{prefixes[index]}</span>{/if}

I actually wanted to use the formatter first, but I use the docs website not the readme and only 'v' is on there, so I missed it.

I'm also not used to the :global modifier and forgot about it, so my styling was limited.
This was a week ago though, I got to see it multiple times since and understood what was missing on that part.

Thank you Simon for the answer and, by the way, I kinda rushed my PR #63 because it had already been 2 weeks since I made the logo for fun and my repo was sitting there unused, but if you're thinking about making this more framework-agnostic I'd be happy to change things around 😃

[simeydotme]

I actually wanted to use the formatter first, but I use the docs website not the readme and only 'v' is on there, so I missed it.

So sorry, apologies, I've really neglected the Docs page and that's totally my bad!

@simeydotme this is fantastic - thank you for your amazing work; this is the best slider component I've ever come across in any framework

wow, high praise, thanks!

by the way, I kinda rushed my PR #63 because it had already been 2 weeks since I made the logo for fun and my repo was sitting there unused, but if you're thinking about making this more framework-agnostic I'd be happy to change things around 😃

I take that kindly and will revert you on #63 as I get time... I didn't instantly merge because I was also taking in to consideration the component's angle (I like the fact it's agnostic, but I also like the extra value it brings for Svelte apps... I'm wondering if I will split into a Svelte-only repo, and another repo for agnostic) ... apologies for the delay.

[rbrdl]

I was playing around in illustrator making logos for tools I like, so I wouldn't want you to feel obliged to use it, no worries at all 🙂

I probably wouldn't get to use the vanilla component but I looked around earlier and it seems there aren't that many standalone slider components, and this is by far the most advanced one.

It's unfortunate the name is that descriptive, it could use being shortened to a simple "svelte slider", or, seeing the work you put in the vanilla version, something like "PipSlide js", there's no real way to tell how many people would be impacted, but the earlier the better I'd say 😅