react-input-range library in React-CodePudding

I am trying to create a Range bar like this

using react-input-range

but when writing this code

import InputRange from 'react-input-range';
import 'react-input-range/lib/css/index.css';

<form action="">
  <InputRange
      maxValue={100}
      minValue={0}
      formatLabel={value => `$${value}`}
      value={range}
      onChange={value => setRange(value)}
      onChangeComplete={value => console.log(value)}
    />
</form>

I got this

CodePudding user response：

Set the initial value of range(state) and you are good to go.

const [range, setRange ]= useState({
        min: 5,
        max: 10,
      });
    <form action="">
      <InputRange
          maxValue={100}
          minValue={0}
          formatLabel={value => `$${value}`}
          value={range}
          onChange={value => setRange(value)}
          onChangeComplete={value => console.log(value)}
        />
    </form>