search pages with filters in process

src/components/ui/MultiRangeSlider.tsx

@@ -15,6 +15,7 @@ interface IMultiRangeSlider {
   currentMax: number;
   step: number;
   disabled?: boolean;
+  label: string;
   onChangeMin: (min: number) => void;
   onChangeMax: (max: number) => void;
 }
@@ -27,6 +28,7 @@ function MultiRangeSlider({
   onChangeMin,
   onChangeMax,
   step,
+  label,
   disabled = false,
 }: IMultiRangeSlider) {
   const [current, setCurrent] = useState<"min" | "max" | null>(null);
@@ -85,22 +87,25 @@ function MultiRangeSlider({
   });
 
   return (
-    <div className="space-y-3">
-      <div className="bg-white/80 rounded-lg relative p-3 flex justify-between w-[267px] border !border-[#E2E2DC]">
+    <div className="2xl:space-y-[0.556vw] space-y-2">
+      <p className="text-s">{label}</p>
+      <div className="bg-white/80 rounded-lg relative p-3 flex justify-between border !border-[#E2E2DC]">
         <p className={clsx("text-s", disabled && "text-[#0D1922]/40")}>
-          {Intl.NumberFormat("en-IN").format(Math.round(currentMin))}
+          {Intl.NumberFormat("en").format(Math.round(currentMin))}
         </p>
         <p className={clsx("text-s", disabled && "text-[#0D1922]/40")}>
-          {Intl.NumberFormat("en-IN").format(Math.round(currentMax))}
+          {Intl.NumberFormat("en").format(Math.round(currentMax))}
         </p>
-        <div className="absolute bottom-0 left-0 translate-y-1/2 w-full px-4">
+        <div className="absolute bottom-0 left-0 w-full px-4 translate-y-1/2">
           <div
-            className="relative h-4 flex"
+            className="relative flex h-4"
             ref={rangeRef}
             onMouseMove={
               handleChange as React.MouseEventHandler<HTMLDivElement>
             }
-            onTouchMove={handleChange as React.TouchEventHandler<HTMLDivElement>}
+            onTouchMove={
+              handleChange as React.TouchEventHandler<HTMLDivElement>
+            }
           >
             <div
               style={{