Как начинать с того шага на котором остановились в input range?

class App extends React.Component {
  state = {
    zoom: 3
  }
 
componentDidMount() {
    this.containerRef.addEventListener('mousemove', this.onMouseMove)
}
 
  onMouseDown = () => {
    this.isResized = true
    // не делайте акцент на цифры, это хардкод для показа
    this.onePercent = 5.26; // константа, высота блока 526px, то есть 1% = 5.26
    this.zoomPercent = 0.03; // константа, значение зума
    this.containerRef.addEventListener('mouseup', this.mouseup)
    this.containerRef.addEventListener('mouseleave', () => {
      this.isResized = false
    })
 
  }
  
  onMouseMove = (e) => {
    if (this.isResized) {
      console.log('current height', e.clientY)
      const height = e.clientY
      // здесь высчитывается коэффициент масштабирование в пределах от 1 до 3
      const zoom = height / this.onePercent * this.zoomPercent
      console.log('zoom', zoom)
      
      if (zoom < 1) {
         this.rangeRef.value = 1
      } else {
        this.rangeRef.value = zoom
      }
   }
  }
  
  mouseup = (e) => {
    this.isResized = false
    console.log('up', e)
  }
 
  render() {
    return (
      <div>
        <div className="block" ref={i => this.containerRef = i}>
          <div className="circle">
           <div className="resize"
            onMouseDown={this.onMouseDown}
           />
          </div>
        </div>
         <input
           readOnly
           type="range"
           value={this.state.zoom}
           step={0.1}
           min={1}
           max={3}
           ref={f => this.rangeRef = f}
          />
      </div>
    );
  }
}
 
 
ReactDOM.render(
    <App/>, document.getElementById('root')
);

const height = e.clientY; // не сводим глаз отсюда, пока не начнет чесаться левая префронтальная доля :D