react-input-slider

<Slider />

<Slider axis="y" />

<Slider axis="xy" />

<Slider disabled />

function App() {
  const [state, setState] = useState({ x: 0.3 });
  return (
    <Fragment>
      <div>{'x: ' + state.x}</div>
      <Slider
        axis="x"
        xstep={0.1}
        xmin={0}
        xmax={1}
        x={state.x}
        onChange={({ x }) => setState({ x: parseFloat(x.toFixed(2)) })}
      />
    </Fragment>
  );
}

<Slider
  axis="x"
  styles={{
    track: {
      backgroundColor: 'blue'
    },
    active: {
      backgroundColor: 'red'
    },
    thumb: {
      width: 40,
      height: 40,
      opacity: 0.8
    }
  }}
/>

function App() {
  const [state, setState] = useState({ x: 10, y: 10 });
  return (
    <div>
      ({state.x}, {state.y})
      <br />
      <input
        type="range"
        min="0"
        max="100"
        step="1"
        value={state.x}
        onChange={e => {
          const x = parseInt(e.target.value, 10);
          setState(({ y }) => ({ x, y }));
        }}
      />
      <Slider axis="xy" x={state.x} y={state.y} onChange={setState} />
      <Slider
        axis="x"
        x={state.x}
        onChange={({ x }) => setState(state => ({ ...state, x }))}
      />
      <Slider axis="y" y={state.y} onChange={({ y }) => setState(state => ({ ...state, y }))} />
    </div>
  );
}