[riaron86]

нашел пример на js обычном отсюда http://www.codingnepalweb.com/price-range-slider-html-css-javascript/[/url]
перевожу его на react если не сложно подскажите какие ошибки

import React,{useState,useRef} from 'react';

function Polzunok() {
    const rangeMin=useRef();
    const rangeMax=useRef();
    const usualMin=useRef();
    const usualMax=useRef();
    const rangeq=useRef();
    const priceGap = 1000;
    const [minPriceI,setMinPriceI]=useState();
    const [maxPriceI,setMaxPriceI]=useState();
    const [minPriceR,setMinPriceR]=useState();
    const [maxPriceR,setMaxPriceR]=useState();


    usualMin.addEventListener("input", e =>{
         setMinPriceI(parseInt(usualMin.current.value));
         setMaxPriceI(parseInt(usualMax.current.value));
           if(( maxPriceI- minPriceI >= priceGap) && usualMax.current.value<= rangeMax.max){
                if(e.target.className === "input-min"){
                    rangeMin.value = minPriceI;
                    rangeq.style.left = ((minPriceI / rangeMin.max) * 100) + "%";
                }
            }
        });
    usualMax.addEventListener("input", e =>{
        setMinPriceI(parseInt(usualMin.current.value));
        setMaxPriceI(parseInt(usualMax.current.value));
           if((maxPriceI - minPriceI >= priceGap) && maxPriceI <= rangeMax.max){
                if(e.target.className === "input-max"){
                    rangeMax.value = maxPriceI ;
                    rangeq.style.right = 100 - (maxPriceI  / rangeMax.max) * 100 + "%";
                }
            }
        });

    rangeMin.addEventListener("input", e =>{
        setMinPriceR (parseInt(rangeMin.current.value));
        setMinPriceR(parseInt(rangeMax.current.value));
            if((maxPriceR - minPriceR) < priceGap){
                if(e.target.className === "range-min"){
                    rangeMin.value = minPriceR - priceGap
                }else{
                    rangeMax.value = minPriceR + priceGap;
                }
            }else{
                usualMin.value = 2500;
                usualMax.value = 7500;
                rangeq.style.left = ((2500 / rangeMin.max) * 100) + "%";
                rangeq.style.right = 100 - (rangeMax / rangeMax.max) * 100 + "%";
            }
        });
    rangeMax.addEventListener("input", e =>{
        setMinPriceR (parseInt(rangeMin.current.value));
        setMinPriceR(parseInt(rangeMax.current.value));
            if((maxPriceR - minPriceR) < priceGap){
                if(e.target.className === "range-max"){
                    rangeMax.value = minPriceR + priceGap;
                }
            }else{
                usualMin.value = 2500;
                usualMax.value = 7500;
                rangeq.style.left = ((2500 / rangeMin.max) * 100) + "%";
                rangeq.style.right = 100 - (rangeMax / rangeMax.max) * 100 + "%";
            }
        });

    return (
        <div className="dbody">
        <div className="wrapper">
            <header>
                <h2>Price Range</h2>
                <p>Use slider or enter min and max price</p>
            </header>
            <div className="price-input">
                <div className="field">
                    <span>Min</span>
                    <input type="number" ref={usualMin} className="input-min" value="2500"/>
                </div>
                <div className="separator">-</div>
                <div className="field">
                    <span>Max</span>
                    <input type="number" ref={usualMax} className="input-max" value="7500"/>
                </div>
            </div>
            <div className="slider">
                <div className="progress" ref={rangeq}></div>
            </div>
            <div className="range-input">
                <input type="range" className="range-min" ref={rangeMin}min="0" max="10000" value="2500" step="100"/>
                    <input type="range" className="range-max" ref={rangeMin} min="0" max="10000" value="7500" step="100"/>
            </div>
        </div>



        </div>
    );
}

export default Polzunok;