如何在闪亮的应用中在范围滑块的两侧显示不同的颜色？当您在任一侧滑动时，颜色也应自动填充

import React, { useState } from 'react';

const RangeSlider = () => {
  const [startValue, setStartValue] = useState(0);
  const [endValue, setEndValue] = useState(100);

  const handleStartChange = (event) => {
    setStartValue(event.target.value);
  };

  const handleEndChange = (event) => {
    setEndValue(event.target.value);
  };

  const getSliderStyle = () => {
    const gradient = `linear-gradient(to right, blue ${startValue}%, red ${endValue}%)`;
    return {
      background: gradient
    };
  };

  return (
    <div>
      <input type="range" min="0" max="100" value={startValue} onChange={handleStartChange} />
      <input type="range" min="0" max="100" value={endValue} onChange={handleEndChange} />
      <div className="slider" style={getSliderStyle()}></div>
    </div>
  );
};

export default RangeSlider;