diff --git a/nerfstudio/viewer/app/src/modules/SidePanel/CameraPanel/CameraPanel.jsx b/nerfstudio/viewer/app/src/modules/SidePanel/CameraPanel/CameraPanel.jsx
index adb3ee15e..e70b1b7cd 100644
--- a/nerfstudio/viewer/app/src/modules/SidePanel/CameraPanel/CameraPanel.jsx
+++ b/nerfstudio/viewer/app/src/modules/SidePanel/CameraPanel/CameraPanel.jsx
@@ -230,13 +230,14 @@ export default function CameraPanel(props) {
   const [ui_seconds, setUISeconds] = React.useState(seconds);
   const [ui_fps, setUIfps] = React.useState(fps);
 
-  const total_num_steps = seconds * fps;
-  const step_size = (cameras.length - 1) / total_num_steps;
-
   // nonlinear render option
   const slider_min = 0;
   const slider_max = Math.max(0, cameras.length - 1);
 
+  // animation constants
+  const total_num_steps = seconds * fps;
+  const step_size = slider_max / total_num_steps;
+
   const reset_slider_render_on_add = (new_camera_list) => {
     // set slider and render camera back to 0
     if (new_camera_list.length >= 1) {
@@ -623,7 +624,7 @@ export default function CameraPanel(props) {
         <Button
           size="small"
           variant="outlined"
-          onClick={() => set_slider_value(slider_value - step_size)}
+          onClick={() => set_slider_value(Math.max(0.0, slider_value - step_size))}
         >
           <ArrowBackIosNewIcon />
         </Button>
@@ -664,7 +665,7 @@ export default function CameraPanel(props) {
         <Button
           size="small"
           variant="outlined"
-          onClick={() => set_slider_value(slider_value + step_size)}
+          onClick={() => set_slider_value(Math.min(slider_max, slider_value + step_size))}
         >
           <ArrowForwardIosIcon />
         </Button>