renaming to img-slider

MurpheyLab · Oct 2, 2024 · eb091a1 · eb091a1
1 parent 4b5dba4
commit eb091a1
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -228,7 +228,7 @@ <h2 class="subtitle has-text-centered">Ours vs. FisherRF</h2>
           <!-- <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> -->
-          <input type="range" min="1" max="100" value="50" class="slider" name='slider' id="slider">
+          <input type="range" min="1" max="100" value="50" class="img-slider" name='img-slider' id="img-slider">
           <div class='slider-button'></div>
         </div>
       </div>

diff --git a/static/css/index.css b/static/css/index.css
@@ -206,7 +206,7 @@ body {
   width: 50%;
 }
 
-.img-container .slider {
+.img-container .img-slider {
   position: absolute;
   -webkit-appearance: none;
   appearance: none;
@@ -218,11 +218,11 @@ body {
   transition: all 0.2s;
 }
 
-.img-container .slider:hover {
+/* .img-container .slider:hover {
   background: rgba(242, 242, 242, 0.1);
-}
+} */
 
-.img-container .slider::-webkit-slider-thumb {
+.img-container .img-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 6px;
@@ -231,14 +231,14 @@ body {
   cursor: pointer;
 }
 
-.img-container .slider::-moz-range-thumb {
+.img-container .img-slider::-moz-range-thumb {
   width: 6px;
   height: 600px;
   background: white;
   cursor: pointer;
 }
 
-.img-container .slider-button {
+.img-container .img-slider-button {
   pointer-events: none;
   position: absolute;
   width: 30px;
@@ -252,19 +252,19 @@ body {
   align-items: center;
 }
 
-.img-container .slider-button:after, 
-.img-container .slider-button:before {
+.img-container .img-slider-button:after, 
+.img-container .img-slider-button:before {
   content: "";
   padding: 3px;
   display: inline-block;
   border: solid #5d5d5d;
   border-width: 0 2px 2px 0;
 }
 
-.img-container .slider-button:after {
+.img-container .img-slider-button:after {
   transform: rotate(-45deg);
 }
 
-.img-container .slider-button:before {
+.img-container .img-slider-button:before {
   transform: rotate(135deg);
 }
diff --git a/static/js/slider.js b/static/js/slider.js
@@ -1,9 +1,9 @@
-$("#slider").on("input change", (e)=>{
+$("#img-slider").on("input change", (e)=>{
   const sliderPos = e.target.value;
   // Update the width of the foreground image
   $('.foreground-img').css('width', `${sliderPos}%`)
   // Update the position of the slider button
-  $('.slider-button').css('left', `calc(${sliderPos}% - 18px)`)
+  $('.img-slider-button').css('left', `calc(${sliderPos}% - 18px)`)
 });
 
 // export function initComparisons() {