search

simeydotme / svelte-range-slider-pips

Multi-Thumb, Accessible, Beautiful Range Slider with Pips
https://simeydotme.github.io/svelte-range-slider-pips/
Mozilla Public License 2.0
449 stars 43 forks source link

Add ability to control initial value before first user interaction. #26

Closed janosh closed 3 years ago

janosh commented 3 years ago

Would be cool if the initial value could be specified explicitly or left undefined. This is useful for controlling whether a form should be submittable if the field is required and the user never touched the range slider.

simeydotme commented 3 years ago

Thanks @janosh for the suggestion,

I think that's something you can implement inside your application; https://svelte.dev/repl/a90bdc0e1fb8440d92fd34e2acc13aea?version=3.32.1

:)

janosh commented 3 years ago

Sorry, I think I didn't make myself clear but thanks for the example! I didn't know about <RangeSlider all="label" /> even though I was looking for that feature. Could you add that to the readme? Can submit a PR if you're busy.

simeydotme commented 3 years ago

Could you add that to the readme? Can submit a PR if you're busy.

That would be fantastic :) relevant commit; https://github.com/simeydotme/svelte-range-slider-pips/commit/6f4483016bcac238e74cb8817f7d21b1be1cbd1d ... I think I was annoyed doing first="label" last="label" rest="label" so added all to be the default

Sorry, I think I didn't make myself clear but thanks for the example!

Hmm, not sure what your question was, then; because a <range> input needs a value, as the input is solely for selecting a value between a minimum and an maximum... thus undefined would not fit within a range and break the functionality. I have yet to see a range input on the web, or in UI design, which has an undefined value. And accordingly MozDev vaguely states so; https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range

If you have an example, or a animation, of what you meant please do share it :)

(oh, I just thought... are you using it as a Svelte component, or as a vanillaJS plugin?)

janosh commented 3 years ago

Maybe you're right and it's a bad idea from UX perspective. The use case I was asking about is this signup form (scroll down a little to see the range slider and change the signup type with the top-most button to see another)

https://studenten-bilden-schueler.de/anmeldung

The form can be submitted either by tutors or tutees. For tutors, they can specify a class range for tutees they would like to teach. The default there is to assume all classes (1 - 13 in Germany). For tutees, it's a single slider (they only attend one level) and the default should be undefined cause we don't know what class level a student is currently attending. But the form should be non-submittable unless they touched the range slider to specify what class they're attending.

PR for all='label' incoming.