Open machineghost opened 4 years ago
P.S. The closest I've managed to get to a working 3-state slider is:
<Slider
connect // what does this do?
onSlide={([value]) => setImportance([parseFloat(value)])} // ugly
pips={{ mode: "steps", stepped: true, density: 1 }} // no understanding of this
start={importance} // works great!
range={{ min: -1, max: 1 }} /// this is not limiting only -1, 0, and 1 as I'd expect
/>
I figured it out! I had to go read a whole other library's documentation, then read the source code to this library (to discover that I can pass an undocumented format
prop ... yes, the Slider has props which are even less documented than the poorly documented ones ;) ), and then I finally got to:
import wNumb from 'wnumb';
(In addition to a "secret" prop, it seems you also need to install and import another library just to tell the Slider "I only want you incrementing/decrementing by 1",)
<Slider
connect
format={wNumb({decimals: 0})}
onSlide={([value]) => setImportance([parseFloat(value)])}
pips={{ mode: 'range', density: 0.1 }}
range={{ min: -1, '50%': 0, max: 1 }}
start={importance}
step={1}
/>
If anyone is following in my footsteps maybe the above code will help them ... but again, hopefully this can be improved.
@machineghost thank you
Most of the other components are straightforward, and while their documentation is minimal, it's enough. But Slider ... what the heck is the
connect
prop? It's in literally every example, but you never once even suggest what it's supposed to do ... it just saysArray[Bool]Bool
.How does
pips
work? You've got two examples but never even describe how the prop is supposed to work. I wanted something extremely basic: a slider with only three values. That should have been trivial, but now I'm wondering if I should switch UI libraries (or at the very least go look for a secondary one with a good slider), because I can't even tell whether it's possible or not with this slider, let alone how to actually do it.The component is full of props, but none are documented :(
Also, when I try to use the
useState
hook (the official Facebook-recommended way to do state in React in 2019) I get:For code like:
I believe onSlide passses some second argument, which annoys React. This makes everyone have to do:
... except, for some odd reason the component doesn't
parseFloat
the value (which makes no sense sincestart
is clearly meant to be an array of numbers), so what you actually have to do is:... and that only works for single values: it gets uglier if you have multiple (although honestly I still don't "grok" how a two-dimensional slider can even have multiple values ... again with the poor documentation.)
Clearly it'd be simpler if the library let you do:
or:
:)
Also, have you noticed that the slider handle is virtually invisible until you focus it? If the user's monitor doesn't have perfectly calibrated brightness/contrast, they might not even see the handle at all, and not recognize the component as a slider UI.
Please consider making this element more visible: it probably looks perfect on your well-tuned display, but something about the design just fails without perfect contrast, and web developers can't guarantee their users' monitor settings.