2 files changed, 19 insertions, 4 deletions

diff --git a/src/components/Geshem.tsx b/src/components/Geshem.tsx
index c34cbc1..b235f6f 100644
--- a/src/components/Geshem.tsx
+++ b/src/components/Geshem.tsx
@@ -17,7 +17,7 @@ export function Geshem({ date }: GeshemProps) {
     (typeof window !== 'undefined' ? new URL(window.location.toString()).searchParams.get("history") : null) ||
     undefined
   );
-  const [slider, setSlider] = useState(playback ? PLAYBACK_SLOTS : 9);
+  const [slider, setSlider] = useState(0);
 
   useEffect(() => {
     const fetchImages = async () =>
@@ -55,11 +55,25 @@ export function Geshem({ date }: GeshemProps) {
     };
   }, [playback]);
 
+  // Update slider to point to the latest image when images change
+  useEffect(() => {
+    if (images.length > 0) {
+      setSlider(prevSlider => {
+        const maxIndex = playback ? PLAYBACK_SLOTS : images.length - 1;
+        // If this is the first load (slider is 0) or if slider is out of bounds, set to max
+        if (prevSlider === 0 || prevSlider > maxIndex) {
+          return maxIndex;
+        }
+        return prevSlider;
+      });
+    }
+  }, [images.length, playback]);
+
   return (
     <>
       <Map images={images} slider={slider} />
       <DateTime images={images} slider={slider} />
-      <Slider slider={slider} playback={playback} setSlider={setSlider} />
+      <Slider slider={slider} playback={playback} setSlider={setSlider} imageCount={images.length} />
     </>
   );
 }
\ No newline at end of file
diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx
index 22a8f8f..2d62b2c 100644
--- a/src/components/Slider.tsx
+++ b/src/components/Slider.tsx
@@ -5,13 +5,14 @@ interface SliderProps {
   playback?: string;
   slider: number;
   setSlider: React.Dispatch<React.SetStateAction<number>>;
+  imageCount: number;
 }
 
-export function Slider({ playback, slider, setSlider }: SliderProps) {
+export function Slider({ playback, slider, setSlider, imageCount }: SliderProps) {
   const sliderRef = useRef<HTMLDivElement>(null);
   const [isDragging, setIsDragging] = useState(false);
 
-  const max = playback ? PLAYBACK_SLOTS : 9;
+  const max = playback ? PLAYBACK_SLOTS : Math.max(0, imageCount - 1);
 
   const handleStart = useCallback((e: React.MouseEvent | React.TouchEvent) => {
     setIsDragging(true);