Reason React Sliders and the min , max parameters

reasonreact

#1

I want to use a input which allows the user to type in the numbers and also use a slider
Something like this ->

let (numericParam,modifyParam) = React.useState(() => 0);

<div>
        <input
          type_="number"
          value={Js.Int.toString(numericParam)}
          onChange={key_event => {
            let newinput = key_event->ReactEvent.Form.target##value;
            modifyParam(_ => int_of_string(newinput));
          }}
        />
        <input 
           type_="range"
           min_={Js.Int.toString(0)}
           max_={Js.Int.toString(100)}
           value={Js.Int.toString(numericParam)}
           step={Js.Int.toString(1)}
           onChange={key_event => {
            let newinput = key_event->ReactEvent.Form.target##value;
            modifyParam(_ => int_of_string(newinput));
          }}
        />
</div>

However any attempt to use sliders are producing errors. How do use a slider ?


#2

The min_ and max_ props do not exist, they are just min and max respectively.
Also step requires a float, no string nor int.

All in all the api is arguably inconsistent, but this should work:

let (numericParam, modifyParam) = React.useState(() => 0);

<div>
  <input
    type_="number"
    value={Js.Int.toString(numericParam)}
    onChange={key_event => {
      let newinput = key_event->ReactEvent.Form.target##value;
      modifyParam(_ => int_of_string(newinput));
    }}
  />
  <input
    type_="range"
    min=0
    max={Js.Int.toString(100)}
    value={Js.Int.toString(numericParam)}
    step=1.0
    onChange={key_event => {
      let newinput = key_event->ReactEvent.Form.target##value;
      modifyParam(_ => int_of_string(newinput));
    }}
  />
</div>;

Live example


#3

Is it possible for the min parameter to be a floating point instead of a int?


#4

If the type system gets in the way, you can always resort to a typecast:

external castFloatToInt: float => int = "%identity";
min=0.0->castFloatToInt

#5

Then, it seems the binding in ReactDOMRe is incorrect. But it would break backwards-compatibility to change it to float there :thinking:

EDIT: seems like there is a neat fix to this in review now: https://github.com/reasonml/reason-react/pull/442