Fix FE

frontend/src/components/map/TravelTimeCard.tsx

@@ -9,7 +9,9 @@ import { TravelTimeInfoPopup } from '../ui/TravelTimeInfoPopup';
 import { CloseIcon } from '../ui/icons/CloseIcon';
 import { EyeIcon } from '../ui/icons/EyeIcon';
 import { InfoIcon } from '../ui/icons/InfoIcon';
-import { formatFilterValue, formatNumber } from '../../lib/format';
+import { SliderLabels } from './filters/SliderLabels';
+import { formatNumber } from '../../lib/format';
+import type { FeatureMeta } from '../../types';
 import { useTravelDestinations } from '../../hooks/useTravelDestinations';
 import {
   MAX_TRAVEL_MINUTES,
@@ -56,7 +58,7 @@ export function TravelTimeCard({
   dragValue,
   onTogglePin,
   onSetDestination,
-  onTimeRangeChange: _onTimeRangeChange,
+  onTimeRangeChange,
   onDragStart,
   onDragChange,
   onDragEnd,
@@ -86,6 +88,17 @@ export function TravelTimeCard({
   const sliderMax = MAX_TRAVEL_MINUTES;
   const displayRange = isActive && dragValue ? dragValue : (timeRange ?? [sliderMin, sliderMax]);
 
+  // Synthetic feature so the time labels reuse the shared SliderLabels (matching
+  // every other filter card) — editable, thumb-following, with the minute unit.
+  const travelFeature: FeatureMeta = {
+    name: 'travelTime',
+    type: 'numeric',
+    min: sliderMin,
+    max: sliderMax,
+    suffix: ` ${t('common.minute')}`,
+    raw: true,
+  };
+
   const ModeIcon = MODE_ICONS[mode];
 
   return (
@@ -211,14 +224,17 @@ export function TravelTimeCard({
             onPointerDown={() => onDragStart(displayRange)}
             onPointerUp={() => onDragEnd()}
           />
-          <div className="relative h-4 mt-1 mx-2.5 text-[10px] text-warm-500 dark:text-warm-400 leading-tight">
-            <span className="absolute left-0">
-              {formatFilterValue(displayRange[0])} {t('common.minute')}
-            </span>
-            <span className="absolute right-0">
-              {formatFilterValue(displayRange[1])} {t('common.minute')}
-            </span>
-          </div>
+          <SliderLabels
+            min={sliderMin}
+            max={sliderMax}
+            value={[displayRange[0], displayRange[1]]}
+            isAtMin={displayRange[0] <= sliderMin}
+            isAtMax={displayRange[1] >= sliderMax}
+            raw
+            showUnit
+            feature={travelFeature}
+            onValueChange={onTimeRangeChange}
+          />
           {filterImpact != null && filterImpact > 0 && (
             <p className="text-[10px] text-warm-400 dark:text-warm-500 -mt-1 ml-2.5">
               {t('filters.filtersOut', { value: formatNumber(filterImpact) })}