UI changes

frontend/src/components/map/TravelTimeCard.tsx

@@ -19,9 +19,14 @@ interface TravelTimeCardProps {
   timeRange: [number, number] | null;
   useBest: boolean;
   isPinned: boolean;
+  isActive: boolean;
+  dragValue: [number, number] | null;
   onTogglePin: () => void;
   onSetDestination: (slug: string, label: string) => void;
   onTimeRangeChange: (range: [number, number]) => void;
+  onDragStart: () => void;
+  onDragChange: (value: [number, number]) => void;
+  onDragEnd: () => void;
   onToggleBest: () => void;
   onRemove: () => void;
 }
@@ -33,9 +38,14 @@ export function TravelTimeCard({
   timeRange,
   useBest,
   isPinned,
+  isActive,
+  dragValue,
   onTogglePin,
   onSetDestination,
   onTimeRangeChange,
+  onDragStart,
+  onDragChange,
+  onDragEnd,
   onToggleBest,
   onRemove,
 }: TravelTimeCardProps) {
@@ -52,13 +62,13 @@ export function TravelTimeCard({
 
   const sliderMin = 0;
   const sliderMax = 120;
-  const displayRange = timeRange ?? [sliderMin, sliderMax];
+  const displayRange = isActive && dragValue ? dragValue : (timeRange ?? [sliderMin, sliderMax]);
 
   const ModeIcon = MODE_ICONS[mode];
 
   return (
     <div
-      className={`space-y-2 px-2 py-2 rounded ${isPinned ? 'ring-2 ring-teal-400 bg-teal-50/50 dark:bg-teal-900/20' : ''}`}
+      className={`space-y-2 px-2 py-2 rounded ${isActive ? 'ring-2 ring-teal-400 bg-teal-50 dark:bg-teal-900/30' : isPinned ? 'ring-2 ring-teal-400 bg-teal-50/50 dark:bg-teal-900/20' : ''}`}
     >
       {/* Header */}
       <div className="flex items-center justify-between">
@@ -130,7 +140,9 @@ export function TravelTimeCard({
             max={sliderMax}
             step={1}
             value={[displayRange[0], displayRange[1]]}
-            onValueChange={([min, max]) => onTimeRangeChange([min, max])}
+            onValueChange={([min, max]) => onDragChange([min, max])}
+            onPointerDown={() => onDragStart()}
+            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])} min</span>