feat: add behaviour to hp/lp filters

src/components/VerticalSlider/VerticalSlider.tsx

@@ -26,7 +26,7 @@ type VerticalSliderProps = {
   onChange?: (value: number) => Promise<boolean>;
   onInput?: (value: number) => void;
 
-  unit?: string;
+  unit?: string | ((value: number) => string);
   formatValue?: (value: number, decimals: number) => string;
 
   showTicks?: boolean;
@@ -198,6 +198,8 @@ export default function VerticalSlider({
 
   const formattedValue = (formatValue ?? formatValueDefault)(displayValue, decimals);
 
+  const displayUnit = typeof unit === 'function' ? unit(displayValue) : unit;
+
   function normalizeValue(input: number) {
     const clamped = Math.min(max, Math.max(min, input));
 
@@ -434,7 +436,7 @@ export default function VerticalSlider({
             }
           }}
         />
-        {unit && <span className="value-unit">{unit}</span>}
+        {displayUnit && <span className="value-unit">{' ' + displayUnit}</span>}
       </div>
     </div>
   );