@hawk-ui/range-slider

import RangeSlider from '@hawk-ui/range-slider';

initialState = {
  range: 50,
};

<RangeSlider
  valueId="rangeValue1"
  rangeId="range1"
  value={state.range}
  onChange={(value) => {
    setState({
      range: value,
    });
  }}
/>

import RangeSlider from '@hawk-ui/range-slider';

initialState = {
  range: 20,
};

<RangeSlider
  valueId="rangeValue2"
  rangeId="range2"
  min={0}
  max={50}
  step={5}
  value={state.range}
  onChange={(value) => {
    setState({
      range: value,
    });
  }}
/>