filters + fullscreen + components

src/components/MultiRangeSlider.tsx

@@ -0,0 +1,51 @@
+import { useState, useRef } from "react";
+import RangeSlider from "react-range-slider-input";
+// import "react-range-slider-input/dist/style.css";
+import "./multiRamgeSlider.css";
+
+interface MultiRangeSliderProps {
+  onChange?: () => void;
+  min: number;
+  max: number;
+}
+
+const MultiRangeSlider = ({ min, max, onChange }: MultiRangeSliderProps) => {
+  const [firstValue, setFirstValue] = useState(min);
+  const [secondValue, setSecondValue] = useState(max);
+
+  const handleOnRangeInputChange = (e: [a: number, b: number]) => {
+    setFirstValue(e[0]);
+    setSecondValue(e[1]);
+  };
+
+  return (
+    <div className="px-2">
+      <div className="flex justify-between p-3 bg-white rounded-2xl relative flex-col">
+        <div className="flex justify-between">
+          <input
+            key={firstValue}
+            type="number"
+            onChange={(e) => console.log("e", e.target.value)}
+            defaultValue={firstValue}
+            className="focus:outline-none input_number"
+          />
+          <input
+            key={secondValue}
+            type="number"
+            defaultValue={secondValue}
+            className="focus:outline-none appearance-none input_number text-right"
+          />
+        </div>
+        <RangeSlider
+          min={min}
+          max={max}
+          value={[firstValue, secondValue]}
+          className="absolute bottom-0 left-2 w-[calc(100%-16px)] z-20"
+          onInput={handleOnRangeInputChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default MultiRangeSlider;