cloud percentege style changed

catalog/templates/map.html

@@ -187,16 +187,24 @@
                         <i class="fa fa-cloud"></i>
                         <span>Cloud percentage</span>
                         <span class="pull-right-container">
-              <span class="label label-primary pull-right"></span>
-            </span>
-          </a>
-          <ul class="treeview-menu sidebar-form">
-            <li>
-              <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>
+                <span class="label label-primary pull-right"></span>
+                </span>
+            </a>
+            <ul class="treeview-menu sidebar-form">
+                <li>
+                    <div class="row">
+                        <div class="col-lg-9" style="padding-top: 5px;">
+                            <input class="cross-range" type="range" min="0" max="100" step="1" value="5" oninput="setCloudPercentage(this.value)"
+                                id="cloudPercentageSelector" name="cloudPercentage">
+                        </div>
+                        <div class="col-lg-3"  style="padding-left:0px;padding-top: 5px;">
+                            <!-- <input class="form-text" id="clouds" value="5" oninput="setCloudPercentageSlider(this.value)" name="cloudPercentage" disabled> -->
+                            <span id="clouds">5</span>
+                        </div>
+                    </div>
+                </li>
+            </ul>
             </li>
-          </ul>
-        </li>
         <li>
         <a href="#"><div class="modal"><!-- Place at bottom of page --></div>
           <span>
@@ -328,7 +336,8 @@
   
     function setCloudPercentage(clouds) {
         //console.log(clouds)
-        document.getElementById("clouds").value=clouds;
+        //document.getElementById("clouds").value = clouds;
+        document.getElementById("clouds").innerHTML=clouds;
     }  
     function setCloudPercentageSlider(clouds) {
         //console.log(clouds)