Реал тайм ограничение input type range
 

Есть input type range с 2мя ползунками не могу сделать так чтобы минимальное значение не превышала максимальное

import React,{useState,useRef,useEffect} from 'react';
function Polzunok() {
    const  pstart= useRef(0);
    const  ppend= useRef(15000);

    const [pstartValue, setPstartValue] = useState();
    const [ppendValue, setPpendValue] = useState();

    useEffect(() => {
        pstart.current.addEventListener('change', e => setPstartValue(e.target.value))
        ppend.current.addEventListener('change', e => setPpendValue(e.target.value))
        pstart.current.addEventListener('change', function (){
            if(pstart.current.value>ppend.current.value){
                pstart.current.value=ppend.current.value-100;
            }
        })
        ppend.current.addEventListener('change', function (){
            if(ppend.current.value<pstart.current.value){
                ppend.current.value=pstart.current.value+100;
            }
        })

    }, []);

    return (
        <div className="container">
            <h5 className="polzName">Название</h5><br/>
            <div className="slider"></div>
            <div>
                <input type="range" ref={pstart} className="pp" min="0" max="15000"></input>
                <input type="range" ref={ppend}  className="pp" min="0" max="15000"></input>
            </div>
            <div><p>"start" {pstartValue} "end" {ppendValue},</p></div>
        </div>
    );
}

export default Polzunok;

для маленького ползунка правило pstart.current.value=ppend.current.value-100; работает только тогда когда он по значению близкок к большому.
А большой все время прыгает к 15000