Reusable Range slider

Author: w3bdesign

src/components/Product/ProductFilters.component.tsx

@@ -2,6 +2,7 @@ import { Dispatch, SetStateAction } from 'react';
 import { Product, ProductType } from '@/types/product';
 import Button from '@/components/UI/Button.component';
 import Checkbox from '@/components/UI/Checkbox.component';
+import RangeSlider from '@/components/UI/RangeSlider.component';
 
 interface ProductFiltersProps {
   selectedSizes: string[];
@@ -85,22 +86,16 @@ const ProductFilters = ({
 
         <div className="mb-8">
           <h3 className="font-semibold mb-4">PRIS</h3>
-            <label htmlFor="price-range" className="sr-only">Pris</label>
-            <input
-              id="price-range"
-              type="range"
-              min="0"
-              max="1000"
-              value={priceRange[1]}
-              onChange={(e) =>
-                setPriceRange([priceRange[0], parseInt(e.target.value)])
-              }
-              className="w-full cursor-pointer"
-            />
-          <div className="flex justify-between mt-2">
-            <span>kr {priceRange[0]}</span>
-            <span>kr {priceRange[1]}</span>
-          </div>
+          <RangeSlider
+            id="price-range"
+            label="Pris"
+            min={0}
+            max={1000}
+            value={priceRange[1]}
+            startValue={priceRange[0]}
+            onChange={(value) => setPriceRange([priceRange[0], value])}
+            formatValue={(value) => `kr ${value}`}
+          />
         </div>
 
         <div className="mb-8">

src/components/UI/RangeSlider.component.tsx

@@ -0,0 +1,63 @@
+import { ChangeEvent } from 'react';
+
+interface IRangeSliderProps {
+  id: string;
+  label: string;
+  min: number;
+  max: number;
+  value: number;
+  onChange: (value: number) => void;
+  startValue?: number;
+  formatValue?: (value: number) => string;
+}
+
+/**
+ * A reusable range slider component with labels
+ * @function RangeSlider
+ * @param {string} id - Unique identifier for the slider
+ * @param {string} label - Accessible label for the slider
+ * @param {number} min - Minimum value of the range
+ * @param {number} max - Maximum value of the range
+ * @param {number} value - Current value of the slider
+ * @param {function} onChange - Handler for when the slider value changes
+ * @param {number} startValue - Optional starting value to display (defaults to min)
+ * @param {function} formatValue - Optional function to format the displayed values
+ * @returns {JSX.Element} - Rendered component
+ */
+const RangeSlider = ({
+  id,
+  label,
+  min,
+  max,
+  value,
+  onChange,
+  startValue = min,
+  formatValue = (val: number) => val.toString(),
+}: IRangeSliderProps) => {
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    onChange(parseInt(e.target.value));
+  };
+
+  return (
+    <div>
+      <label htmlFor={id} className="sr-only">
+        {label}
+      </label>
+      <input
+        id={id}
+        type="range"
+        min={min}
+        max={max}
+        value={value}
+        onChange={handleChange}
+        className="w-full cursor-pointer"
+      />
+      <div className="flex justify-between mt-2">
+        <span>{formatValue(startValue)}</span>
+        <span>{formatValue(value)}</span>
+      </div>
+    </div>
+  );
+};
+
+export default RangeSlider;