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

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

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

  const railStyle = { backgroundColor: "#e6e6e6", height: 8 };
  return (
    <Slider
      range
      min={min}
      max={max}
      allowCross={false}
      defaultValue={[min, max]}
      onChange={onChange}
      handleStyle={[handleStyle, handleStyle]}
      trackStyle={trackStyle}
      railStyle={railStyle}
    />
  );
};

export default RangeSlider;
