fixing extreme values display slider

1cgeo · Sep 3, 2024 · 419b608 · 419b608
1 parent 98061a4
commit 419b608
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -129,7 +129,7 @@ datalist {
   position: absolute;
   bottom: 0;
   left: 0;
-  background: rgba(255, 255, 255, 1);
+  background: rgba(255, 255, 255, 0.8);
   margin-left: 20px;
   margin-bottom: 10px;
   font-family: Arial, sans-serif;
@@ -257,11 +257,11 @@ datalist {
 
 /* Modal Content */
 .modal-content {
-  background-color: #fefefe;
+  background-color: rgb(254, 254, 254, 0.8);
   margin: auto;
   padding: 20px;
   border: 1px solid #888;
-  width: 300px;
+  width: 450px;
 }
 
 /* The Close Button */

diff --git a/js/main.js b/js/main.js
@@ -72,7 +72,7 @@ loadLegend = (
     let legendEl = document.getElementById(legendElId);
 
     legendEl.style.display = 'block';
-    legendEl.style.width = (legendOrto && legendOrto.length > 0) ? '300px' : '150px';
+    legendEl.style.width = (legendOrto && legendOrto.length > 0) ? '450px' : '150px';
     legendEl.innerHTML = '';
 
     let legendTitle = `
@@ -122,7 +122,7 @@ loadLegend = (
     let slideIndex = getSlideIndex(activeSlide);
     let sliderContent = (slideIndex > 2 && slideIndex < 7) ? `
         <h4>Escolha a partir de qual ano exibir as cartas</h4>
-        <input type="range" min="${yearInterval.min}" max="${yearInterval.max}" value="${year}" id="sliderFilter" list="values" />
+        <input type="range" min="${yearInterval.min}" max="${yearInterval.max}" value="${year}" id="sliderFilter" list="values" step="1"/>
         <datalist id="values">
             <option value="${yearInterval.min}" label="${yearInterval.min}"></option>
             <option value="${yearInterval.max}" label="${yearInterval.max}"></option>
@@ -144,7 +144,7 @@ loadLegend = (
     }
 
     sliderFilter?.addEventListener('input', function() {
-        year = this.value;
+        year = parseInt(this.value, 10);
         filterGeo(year, false);
         subtitleCount = activeSubtitleCount;
         subtitleOrtoCount = activeSubtitleOrtoCount;