basic slider changes

index.html

@@ -225,15 +225,13 @@ <h2 class="subtitle has-text-centered">Ours vs. FisherRF</h2>
         </div>
         <div class='img-container'>
           <div class="img background-img" style="background-image: url(https://i.imgur.com/s08MkXC.jpg);"></div>
-          <!-- <div class="img background-img" style="background-image: url(static/images/ours_dozer.png);"></div> -->
-          <div class='img foreground-img' style="background-image: url(https://i.imgur.com/PfIWek4.jpg);"></div>
-          <!-- <div class='img foreground-img' style="background-image: url(static/images/fisher_dozer.png);"></div> -->
+          <div class='img foreground-img' style="background-image: url(https://i.imgur.com/PfIWek4.jpg);"></div>]
           <input type="range" min="1" max="100" value="50" class="img-slider" id="img-slider">
           <div class='img-slider-button'></div>
-          <script>
+          <!-- <script>
             import { handleSliderChange } from './static/js/slider.js';
             handleSliderChange();
-          </script>
+          </script> -->
         </div>
       </div>
     </section>

static/js/slider.js

@@ -1,6 +1,6 @@
 // Function to handle slider changes
 export function handleSliderChange() {
-  const sliderPos = imgSlider.target.value;
+  sliderPos = imgSlider.target.value;
 
   // Update the width of the foreground image
   document.querySelector('.foreground-img').style.width = `${sliderPos}%`;
@@ -10,7 +10,7 @@ export function handleSliderChange() {
 }
 
 // Get the slider element and add event listeners for 'input' and 'change'
-const imgSlider = document.getElementById("img-slider");
+const imgSlider = document.getElementById(".img-slider");
 imgSlider.addEventListener("input", handleSliderChange);
 imgSlider.addEventListener("change", handleSliderChange);