search

shaun-sweet / image-processing-ui

0 stars 0 forks source link

UI: Dual handle range sliders #2

Open alkasm opened 7 years ago

alkasm commented 7 years ago

Instead of having six sliders (one for the minimum in each of three channels, and one for the maximum in each of three channels), it would be nicer to have three sliders, each corresponding to a channel, and having two handles to select the min and max in each channel. We need the min value to display on the left side of the slider, and max value to display on the right, with the slider label to the left of everything.

It should look something like: Ch 1: [50)> ░░░░░█▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒█░░░░░░ <(200] Ch 2: [0 )> █▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒█ <(255] Ch 3: [0 )> █▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒█░░░░░░░░░░░░░░░░░ <(127]

shaun-sweet commented 7 years ago

https://github.com/seatgeek/react-slider

alkasm commented 7 years ago

@shaun-sweet that one is apparently deprecated but with no description of a reason why---it may be faulty, but might not just be supported anymore (in which case, deprecated would not be the correct term). Here's some others:

https://github.com/react-component/slider (example: http://react-component.github.io/slider/examples/range.html) http://leaverou.github.io/multirange/

shaun-sweet commented 7 years ago

So would the input fields be on the corresponding side if we implement this?

https://github.com/shaun-sweet/image-processing-ui/issues/9

So atm this is setup so you see the input on the right.