filter type reformatted

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

Hide file tree

Showing 2 changed files with 23 additions and 17 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -335,13 +335,21 @@
             box-shadow: 0 0 15px 3px rgba(41, 128, 185, 0.75); /* Enhanced focus state */
         }
 
-        #rating-min-display, #rating-max-display {
-            margin-left: 10px;
-            font-weight: bold;
+        .rating-range-container {
+            display: flex;
+            align-items: center;
         }
 
         input[type="range"] {
-            width: 100%;
+            flex: 1;
+            margin: 0 10px;
+        }
+
+        #rating-display {
+            padding: 5px;
+            background-color: #e0f7e9; /* Light green background */
+            border-radius: 5px;
+            font-weight: bold;
         }
 
     </style>
@@ -476,16 +484,11 @@ <h3 style="color: #800020;">Filter Options</h3>
 
                 <!-- Rating Filter -->
                 <div class="filter-section">
-                    <label>Rating:</label>
-                    <div>
-                        <label for="rating-min">Min:</label>
-                        <input type="range" id="rating-min" name="rating-min" min="0" max="5" step="0.1" value="0" oninput="updateRatingDisplay('min', this.value)">
-                        <span id="rating-min-display">0.0</span>
-                    </div>
-                    <div>
-                        <label for="rating-max">Max:</label>
-                        <input type="range" id="rating-max" name="rating-max" min="0" max="5" step="0.1" value="5" oninput="updateRatingDisplay('max', this.value)">
-                        <span id="rating-max-display">5.0</span>
+                    <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>
                 </div>
 

diff --git a/docs/static/map.js b/docs/static/map.js
@@ -202,6 +202,7 @@ addTogglePanelControl();
 
 // Initialize filter event listeners
 initializeFilterControls();
+updateRatingDisplay(); // Set initial rating display values
 
 function applyThemeColors(theme) {
     const themeColors = colorThemes[theme] || colorThemes['default'];
@@ -580,9 +581,11 @@ function formatCountryName(countryName) {
     return formattedWords.join(' ');
 }
 
-// Update the display for the rating slider
-function updateRatingDisplay(type, value) {
-    document.getElementById(`rating-${type}-display`).innerText = value;
+// Update the display for the rating sliders
+function updateRatingDisplay() {
+    const minRating = document.getElementById('rating-min').value;
+    const maxRating = document.getElementById('rating-max').value;
+    document.getElementById('rating-display').innerText = `${minRating} - ${maxRating}`;
 }
 
 // Filter part