Expand pips input as filter

[3commascapital]

The pips input is useful for turning pips on and off and presenting uniform tick spacing ui, however, it would also be very useful for communicating valid values that are known to the rendering component ahead of time.

This would allow for preferred values to be communicated to users, even if they are gapped or do not follow a particular tick interval.

It would be great to also have an option to optionally snap the slider back to valid values, but the first use case, in my opinion, is to outsource valid vs invalid values and communicate them via the slider ticks.

[simeydotme]

hey @3commascapital !

Firstly I think you've made some nice formatting changes, the code is much easier to read with those {@const ... } for sure! 👍

However, this PR seems to be addressing an issue I don't fully understand right now. Please could you set up some demos of your changes (any/all ways it can affect/interact with the existing options) ... and explain what you're trying to achieve with a simple diagram or something?

I appreciate your effort/contribution and don't want to waste it. Thanks

[simeydotme]

If I'm not mistaken, this is what you're trying to achieve? https://svelte.dev/repl/378cf5769a564582b8ed9460787cb408?version=4.2.19

I know it's not as simple as your proposal, but its more controllable

[3commascapital]

hey @simeydotme , thanks for your response.

I see, yeah, so long as the css is dynamically generated (probably best with a hidden class?) that would be fine!

I got frustrated when i was fiddling with the array but the numbers were not showing up. Do you suggest users control which pips are shown through css or is building in this feature something you are amenable to?

[simeydotme]

hey @simeydotme , thanks for your response.

I see, yeah, so long as the css is dynamically generated (probably best with a hidden class?) that would be fine!

I got frustrated when i was fiddling with the array but the numbers were not showing up. Do you suggest users control which pips are shown through css or is building in this feature something you are amenable to?

So I think that I prefer it to be done with css. For which I think I need to add a data-pip={val} so that targeting the pips is easier.

But I also acknowledge that there's scenarios where the desired pips to be shown may be dynamic, and not a lot of devs understand the concepts of web design and how to dynamically hide/show things.

So I'll give a try of documenting the correct approach with CSS first, and see how that feels before fully implementing a pips array prop.

[3commascapital]

a more general solution could be to pass in an array of strings that correspond to pips. that way the user could control different states for each pip. maybe merge it using the classnames package in order to allow for objects as well

[simeydotme]

a more general solution could be to pass in an array of strings that correspond to pips. that way the user could control different states for each pip. maybe merge it using the classnames package in order to allow for objects as well

oh forgot to share this; https://simeydotme.github.io/svelte-range-slider-pips/en/styling/pips/#extreme-control-with-js

I dont think I'll be adding any dependencies.

I've always considered an arbitrary set of pips like the HTML range input has now with dataset ... might need to start work on that

[3commascapital]

ah super cool. thanks for sharing!