web/plugins/RangeSlider/page.jsx

import Slider from "rc-slider";
import "rc-slider/assets/index.css";

const RangeSlider = ({ min, max, onChange, values }) => {
  const handleStyleMin = {
    borderColor: "#2189A8",
    height: 25,
    width: 25,
    marginTop: -9,
    backgroundColor: "white",
    // left: 0,
  };

  const trackStyle = [{ backgroundColor: "#2189A8", height: 8 }];

  const railStyle = { backgroundColor: "#e6e6e6", height: 8 };
  return (
    <Slider
      range
      min={min}
      max={max}
      allowCross={false}
      value={values ?? [min, max]}
      // defaultValue={[min, max]}

      onChangeComplete={onChange}
      handleStyle={[handleStyleMin, handleStyleMin]}
      trackStyle={trackStyle}
      railStyle={railStyle}
    />
  );
};

export default RangeSlider;