Commit 40cd8511 authored by Irving David's avatar Irving David

añadido slider para seleccionar porcentaje de nubes

parent 1ab26fd6
.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;
}
......@@ -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();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment