Update the step argument for range sliders?

1

Hey there! I’m adding a range slider to my UI. According to MDN the step attribute should be a number or the string “any” to treat it like a contiguous range of numbers. However, with the current ReScript bindings the range slider step attribute only accepts a number.

Is there a way to override that locally? Or should I fork it and submit a PR to the react bindings?

Haven’t hit this case before so curious what options are available.

Source: <input type="range"> - HTML: HyperText Markup Language | MDN
Edit: Reproduction ReScript Playground

2

You could cheat and go with step={Obj.magic("any")}

3 Likes
3

Yes, with the generic JSX transform: JSX | ReScript Language Manual

The same way how you would bind to Preact you can also “overwrite” the React bindings that are shipped with the compiler. Here is a short example:

module ReactDOM = { // actually its own file like "MyReactDom.res"
  module JsxDOM = {
    @unboxed
    type range =
      | @as("any") Any
      | String(string)
      | Int(int)

    type domProps = {
      ...JsxDOM.domProps,
      step_?: range,
    }

    type domRef = JsxDOM.domRef
  }

// ... cut for brevity, look at the playground example please
}

@react.component
let make = () =>
  <>
    <input type_="range" min="0" max="100" step_=Any />
    <input type_="range" min="0" max="100" step_=Int(50) />
    <input type_="range" min="0" max="100" step_=String("10") />
  </>

Don’t forget to add the file with the bindings to your rescript.json:

"jsx": {
  "module": "MyReactDom"
 },

Well, actually you cannot overwrite existing props, that’s why I called the new one step_.

But we would not mind a PR either, here is the source: rescript/runtime/JsxDOM.res at 4a5c3ea20875d29d6c2acb479849852674eb498a · rescript-lang/rescript · GitHub