[HN Gopher] Native dual-range input
___________________________________________________________________
Native dual-range input
Author : Wolfr_
Score : 74 points
Date : 2024-12-04 18:39 UTC (4 hours ago)
(HTM) web link (muffinman.io)
(TXT) w3m dump (muffinman.io)
| rafram wrote:
| This is very neat! Nice work.
| echoangle wrote:
| Very cool, I always used the jQuery UI slider when I needed a
| range input, which forced me to add jQuery and jQuery UI to my
| page, just for a single slider. This is very nice!
|
| Edit: is there a chance to get a premade plain JS file to use,
| instead of an ESM module?
| tln wrote:
| You can grab this and then remove the "export default" line at
| the end.
|
| https://cdn.jsdelivr.net/npm/@stanko/dual-range-input@0.9.8/...
|
| Don't forget the CSS
|
| https://cdn.jsdelivr.net/npm/@stanko/dual-range-input@0.9.8/...
| corytheboyd wrote:
| Very clever!
|
| Totally unrelated to this project, just a general UI question:
| does anyone like these inputs? Every time there is a number input
| next to one, I use that instead. Seems the upper limit of "ticks"
| you can have on one before it becomes unusable is like... 10?
|
| Proper number inputs support all the same features (min, max,
| arrow keys to increment/decrement), but you can also just input
| an exact number. The range does visualize min, max, and current
| value relative to those nicely, but it's annoying to actually use
| as an input more often than not.
|
| The only real exception is for ranges of 0-100 type things, where
| the exact value doesn't need to be precise, just roughly
| somewhere on that 1-100 scale. Eyeballing it is enough here, you
| don't feel frustrated that you can't use your thumb to get
| exactly 71. Volume slider, etc.
| encoderer wrote:
| I could make the argument that a number input plus a labeled
| slider is superior to number input plus a text label of min/max
| corytheboyd wrote:
| Makes sense to me, the range input is effectively acting as
| the label here, it just happens to be an input as well. Best
| (better?) of both worlds.
| yreg wrote:
| > does anyone like these inputs?
|
| We've A/B tested a slider against a textbox with plus and minus
| buttons (banking, on mobile) and the latter seemed to work
| better (as in fewer users cancelled the flow).
|
| I'm not pretending this finding can be generalised, though.
| Rygian wrote:
| I can't imagine a banking interaction where the amount of
| money is not a precise value.
|
| What use cases motivated the testing of a slider?
| lilyball wrote:
| Playing around with this and immediately hit a bug. If I drag the
| sliders to 100 - 100 and then try to do 99 - 99, I can't. I can't
| get there from 99 - 100, and I can't get there from 98 - 99. The
| only way to get to 99 - 99 is to drag the lower bound somewhere
| lower than 98. If I'm at 98 - 99 and I drag it down to 97 - 99,
| then I can get to 99 - 99.
|
| This bug can occur anywhere, it was just easiest to hit at 99 -
| 99 because that's right next to one of the ends of the slider.
| More generally, if I get to any X - X, then I drag one end of the
| slider by 1 step, I can't drag the other end of the slider into
| that gap. The only way to close that gap is to drag the other end
| further away first.
| encoderer wrote:
| ^ and this is why I love making developer tools.
| Arnavion wrote:
| 100-100 -> 99-100 -> 99-99 works for me in Chromium on desktop
| Linux.
|
| I do have a different visual bug. If I start at 23-25 and then
| drag to 24-25, the right knob at 25 shifts by a few pixels.
| Drag the left knob back to 23 and the right knob also shifts
| back.
| cosmotic wrote:
| Is this the right place to report bugs? The handles in the first
| two examples trap touch interaction blocking scroll. The latter
| three examples don't. This has a side effect of not being able to
| 'drag up to reveal the labels underneath ones fingers since it
| just scrolls the page, keeping the labels underway the finger.
| stankot wrote:
| Hey, author here, glad to see it popping up on HN.
|
| I see people started opening issues and leaving bug reports here.
| I'll try to go through them tomorrow (it is getting late here).
|
| I created it because I needed it for my generative drawings. I
| prefer dragging a slider and seeing how the image changes, more
| than typing in a number.
|
| I really tried to keep it minimal.
___________________________________________________________________
(page generated 2024-12-04 23:00 UTC)