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 says Array[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:
index.js:1375 Warning: State updates from the useState() and useReducer() Hooks don't support the second callback argument. To execute a side effect after rendering, declare it in the component body with useEffect().
For code like:
const [value, setter] = useState([0]);
return <Slider
connect
onSlide={setter}
pips={{ mode: "steps", stepped: true, density: 1 }}
start={value} />
I believe onSlide passses some second argument, which annoys React. This makes everyone have to do:
onSlide={value => setter(value)}
... except, for some odd reason the component doesn't parseFloat the value (which makes no sense since start is clearly meant to be an array of numbers), so what you actually have to do is:
onSlide={([value]) => setter([parseFloat(value)])}
... 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent