inputRange

parent a0b2fc83
.cross-range {
input[type=range] {
height: 6px;
-webkit-appearance: none;
margin: 6px 0;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 14px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #50555C;
background: #50555C;
border-radius: 14px;
border: 0px solid #000000;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0px 0px 0px #000000;
border: 0px solid #000000;
height: 20px;
width: 40px;
border-radius: 12px;
background: #dc7828;
cursor: pointer;
-webkit-appearance: none;
margin-top: -3px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #50555C;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 14px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #50555C;
background: #50555C;
border-radius: 14px;
border: 0px solid #000000;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0px #000000;
border: 0px solid #000000;
height: 20px;
width: 40px;
border-radius: 12px;
background: #529DE1;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 14px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #50555C;
border: 0px solid #000000;
border-radius: 28px;
box-shadow: 1px 1px 1px #50555C;
}
input[type=range]::-ms-fill-upper {
background: #50555C;
border: 0px solid #000000;
border-radius: 28px;
box-shadow: 1px 1px 1px #50555C;
}
input[type=range]::-ms-thumb {
margin-top: 1px;
box-shadow: 0px 0px 0px #000000;
border: 0px solid #000000;
height: 20px;
width: 40px;
border-radius: 12px;
background: #529DE1;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #50555C;
}
input[type=range]:focus::-ms-fill-upper {
background: #50555C;
}
/*.cross-range {
-webkit-appearance: none;
width: 100%;
margin: 4.05px 0;
......@@ -89,3 +180,4 @@
padding-left: 10px;
padding-right: 10px;
}
*/
\ No newline at end of file
......@@ -120,11 +120,10 @@
{% block content %}
<!-- Content Wrapper. Contains page content -->
<!-- Main content -->
<div id="timeLine" class="container floating-panel slidecontainer"
style="position:absolute; display:block; bottom: 40px; left: 12%; width: 500px; z-index: 1000">
<div class="range-control" id="rangecontrol">
<div id="rangecontrol2"></div>
<div id="timeLine" class="container col-md-12 floating-panel slidecontainer"
style="position:absolute; display:block; bottom: 40px; width: 500px; z-index: 1000">
<div id="set_Range_date" class="col-md-4 pull-right">Date: {{ labels.0|slice:"6:8" }}/{{ labels.0|slice:"4:6" }}/{{ labels.0|slice:"0:4" }}</div>
<div class="range-control col-md-8" id="rangecontrol">
<input class="cross-range" id="inputRange" type="range" min="0" max="{{ labels|length|add:'-1' }}" step="1"
value="0" data-thumbwidth="20" style="background: transparent;">
......@@ -139,10 +138,11 @@
</div>
</div>
<div id="selectLeft" class="container floating-panel"
<div id="selectLeft" class="container col-md-12 floating-panel"
style="position:absolute; display:none; bottom: 50px; left: 30%; width: 300px; z-index: 1000">
<div class="">
<div id="rangecontrol3"></div>
<div id="set_Range_date2" class="col-md-4 pull-left">{{ labels.0|slice:"6:8" }}/{{ labels.0|slice:"4:6" }}/{{ labels.0|slice:"0:4" }}</div>
<div class="col-md-8">
<!--<select onchange="selectLeft(this.value)" id="selectLeftCompare">
{% for label in labels %}
<option value="{{label}}" >{{ label|slice:"6:8" }}/{{ label|slice:"4:6" }}/{{label|slice:"0:4" }}</option>
......@@ -153,10 +153,11 @@
</div>
</div>
<div id="selectRight" class="container floating-panel"
<div id="selectRight" class="container col-md-12 floating-panel"
style="position:absolute; display:none; bottom: 50px; left: 75%; width: 300px; z-index: 1000">
<div>
<div id="rangecontrol4"></div>
<div id="set_Range_date3" class="col-md-4 pull-left">{{ labels.0|slice:"6:8" }}/{{ labels.0|slice:"4:6" }}/{{ labels.0|slice:"0:4" }}</div>
<div class="col-md-8">
<!--<select onchange="selectRight(this.value)" id="selectRightCompare">
{% for label in labels %}
<option value="{{label}}" >{{ label|slice:"6:8" }}/{{ label|slice:"4:6" }}/{{label|slice:"0:4" }}</option>
......@@ -385,7 +386,9 @@
$("#tooltiptext").empty();
$("#tooltiptext").append(fecha);
$("#rangecontrol2").empty();
$("#rangecontrol2").append('<span class="arrow_box" id="tooltiptext">' + fecha + '</span>');
$("#set_Range_date").empty();
//$("#rangecontrol2").append('<span class="arrow_box" id="tooltiptext">' + fecha + '</span>');
$("#set_Range_date").append('Date: '+fecha);
$('.arrow_box').css({'left': Math.round(pixelPostion - 35) + 'px'})
});
......@@ -410,8 +413,8 @@
$("#tooltiptext2").empty();
$("#tooltiptext2").append(fecha);
$("#rangecontrol3").empty();
$("#rangecontrol3").append('<span class="arrow_box_left" id="tooltiptext2">' + fecha + '</span>');
$("#set_Range_date2").empty();
$("#set_Range_date2").append(fecha);
$('.arrow_box_left').css({'left': Math.round(pixelPostion - 35) + 'px'})
});
......@@ -437,8 +440,8 @@
$("#tooltiptext3").empty();
$("#tooltiptext3").append(fecha);
$("#rangecontrol4").empty();
$("#rangecontrol4").append('<span class="arrow_box_right" id="tooltiptext3">' + fecha + '</span>');
$("#set_Range_date3").empty();
$("#set_Range_date3").append(fecha);
$('.arrow_box_right').css({'left': Math.round(pixelPostion - 35) + 'px'})
});
</script>
......@@ -561,7 +564,7 @@
index++;
console.log(index);
if (index >= lista_productos.length)
index = 0;
index = 0;
console.log(lista_productos[index]);
window.location.replace("../reports/"+lista_productos[index]);
......
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