small update

com-480-data-visualization · May 26, 2024 · adaae71 · adaae71
1 parent cea9b7a
commit adaae71
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 10 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -337,19 +337,29 @@
 
         .rating-range-container {
             display: flex;
+            justify-content: space-between;
             align-items: center;
         }
 
+        .slider-container {
+            position: relative;
+            width: 45%;
+        }
+
         input[type="range"] {
-            flex: 1;
-            margin: 0 10px;
+            width: 100%;
+            margin: 0;
         }
 
-        #rating-display {
-            padding: 5px;
-            background-color: rgb(166, 64, 48); /* Datatouille background */
-            border-radius: 5px;
+        .slider-container span {
+            position: absolute;
+            top: -25px;
+            left: 50%;
+            transform: translateX(-50%);
             font-weight: bold;
+            background-color: #e0f7e9; /* Light green background */
+            padding: 2px 5px;
+            border-radius: 3px;
         }
 
     </style>
@@ -486,9 +496,14 @@ <h3 style="color: #800020;">Filter Options</h3>
                 <div class="filter-section">
                     <label for="rating-range">Rating:</label>
                     <div class="rating-range-container">
-                        <input type="range" id="rating-min" name="rating-min" min="0" max="5" step="0.1" value="0" oninput="updateRatingDisplay()">
-                        <span id="rating-display">0.0 - 5.0</span>
-                        <input type="range" id="rating-max" name="rating-max" min="0" max="5" step="0.1" value="5" oninput="updateRatingDisplay()">
+                        <div class="slider-container">
+                            <input type="range" id="rating-min" name="rating-min" min="0" max="5" step="0.1" value="0" oninput="updateRatingDisplay()">
+                            <span id="rating-min-display">0.0</span>
+                        </div>
+                        <div class="slider-container">
+                            <input type="range" id="rating-max" name="rating-max" min="0" max="5" step="0.1" value="5" oninput="updateRatingDisplay()">
+                            <span id="rating-max-display">5.0</span>
+                        </div>
                     </div>
                 </div>
 

diff --git a/docs/static/map.js b/docs/static/map.js
@@ -585,9 +585,11 @@ function formatCountryName(countryName) {
 function updateRatingDisplay() {
     const minRating = document.getElementById('rating-min').value;
     const maxRating = document.getElementById('rating-max').value;
-    document.getElementById('rating-display').innerText = `${minRating} - ${maxRating}`;
+    document.getElementById('rating-min-display').innerText = minRating;
+    document.getElementById('rating-max-display').innerText = maxRating;
 }
 
+
 // Filter part
 function initializeFilterControls() {
     document.getElementById('apply-filters').addEventListener('click', function() {