añadido slider para seleccionar porcentaje de nubes

catalog/static/catalog/css/crossrange.css

+.cross-range {
+  -webkit-appearance: none;
+  width: 100%;
+  margin: 4.05px 0;
+}
+.cross-range:focus {
+  outline: none;
+}
+.cross-range::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 7.9px;
+  cursor: pointer;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  background: #dc7828;
+  border-radius: 25px;
+  border: 1px solid #dc7828;
+}
+.cross-range::-webkit-slider-thumb {
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  border: 1px solid #000000;
+  height: 16px;
+  width: 16px;
+  border-radius: 50px;
+  background: #ffffff;
+  cursor: pointer;
+  -webkit-appearance: none;
+  margin-top: -5.05px;
+}
+.cross-range:focus::-webkit-slider-runnable-track {
+  background: #e0863e;
+}
+.cross-range::-moz-range-track {
+  width: 100%;
+  height: 7.9px;
+  cursor: pointer;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  background: #dc7828;
+  border-radius: 25px;
+  border: 1px solid #dc7828;
+}
+.cross-range::-moz-range-thumb {
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  border: 1px solid #000000;
+  height: 16px;
+  width: 16px;
+  border-radius: 50px;
+  background: #ffffff;
+  cursor: pointer;
+}
+.cross-range::-ms-track {
+  width: 100%;
+  height: 7.9px;
+  cursor: pointer;
+  background: transparent;
+  border-color: transparent;
+  color: transparent;
+}
+.cross-range::-ms-fill-lower {
+  background: #ca6c21;
+  border: 1px solid #dc7828;
+  border-radius: 50px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+.cross-range::-ms-fill-upper {
+  background: #dc7828;
+  border: 1px solid #dc7828;
+  border-radius: 50px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+.cross-range::-ms-thumb {
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  border: 1px solid #000000;
+  height: 16px;
+  width: 16px;
+  border-radius: 50px;
+  background: #ffffff;
+  cursor: pointer;
+  height: 7.9px;
+}
+.cross-range:focus::-ms-fill-lower {
+  background: #dc7828;
+}
+.cross-range:focus::-ms-fill-upper {
+  background: #e0863e;
+}
+
+#opacitySlide {
+  background: transparent;
+  padding-left: 10px;
+  padding-right: 10px;
+}

catalog/templates/map.html

@@ -5,6 +5,7 @@
     <link rel="stylesheet" href="{% static 'catalog/css/map.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'catalog/css/body.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'catalog/css/modal1.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'catalog/css/crossrange.css' %}" type="text/css">
     <!--  <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">-->
     <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
     <link rel="stylesheet" href="{% static 'catalog/css/waitingModal.css' %}" type="text/css">
@@ -190,7 +191,8 @@
           </a>
           <ul class="treeview-menu sidebar-form">
             <li>
-              <input class="form-control" type="number" value="100" name="cloudPercentage">
+              <input class="form-text" id="clouds" value="5" oninput="setCloudPercentageSlider(this.value)" name="cloudPercentage" disabled>
+              <input class="cross-range" type="range" min="0" max="100" step="1" value="5" oninput="setCloudPercentage(this.value)" id="cloudPercentageSelector" name=cloudPercentage>
             </li>
           </ul>
         </li>
@@ -322,6 +324,23 @@
 
   </script>
   <script>
+  
+    function setCloudPercentage(clouds) {
+        //console.log(clouds)
+        document.getElementById("clouds").value=clouds;
+    }  
+    function setCloudPercentageSlider(clouds) {
+        //console.log(clouds)
+        //TODO
+        document.getElementById("cloudPercentageSelector").value=clouds;
+        if(parseInt(clouds)>100){
+            document.getElementById("cloudPercentageSelector").value=100;
+        }
+        if(parseInt(clouds)<0){
+            document.getElementById("cloudPercentageSelector").value=0;
+        }        
+    }    
+  
     //var osmap = new OpenStreetMapsClass("map", -99.145556,19.419444, 10);
     var osmap = new sidtMap("map", -89.63873079999999,21.0404457, 7);
     osmap.geolocation();