Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Native dual-range input

muffinman.io

Post reply on HN
Print view View original

1–10 of 51 posts

Re: Native dual-range input

#3

Post by echoangle »

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?

Re: Native dual-range input

#4

Post by corytheboyd »

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.

Re: Native dual-range input

#5

Post by lilyball »

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.

Re: Native dual-range input

#6

Post by encoderer »

lilyball wrote: post #5

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 b…

^ and this is why I love making developer tools.

Re: Native dual-range input

#7

Post by encoderer »

corytheboyd wrote: post #4

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…

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

Re: Native dual-range input

#8

Post by Arnavion »

lilyball wrote: post #5

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 b…

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.

Re: Native dual-range input

#9

Post by corytheboyd »

encoderer wrote: post #7
corytheboyd wrote: post #4

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…

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

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.
Post reply on HN