I have a page where there is a slider and a graph is drawn according to the value. The slider has values from 1 to 5 and there are also 5 chart types. In Chrome everything is fine. However, Firefox can't handle it. I am attaching a piece of code and asking how to solve this? Thank you
<div class="slidecontainer" style="height: 0 !important;">
<input type="range" min="1" max="5" aria-orientation="vertical" value="#{IVB.iQ.q1}" class="slider"
id="myRange" onclick="asd()" onchange="#{IVB.yAL()}" ondurationchange="asd()"/>
</div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function asd(){
document.getElementById("j_idt26:est").value = document.getElementById("myRange").value
updateData();
}
function drawChart() {
let data;
if(document.getElementById("myRange").value == 1){
data = google.visualization.arrayToDataTable([
[' ', 'Mv', 'Mz'],
[' ', 0, 0],
[' ', 2000, -1000]
]);
}
</script>
This: -webkit-appearance: slider-vertical; was wrong.
Final solution:
.slider {
width: 150px;
height: 15px;
position: relative;
top: -310px;
left: 840px;
border-radius: 5px;
background-color: #26C6DA;
outline: none;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
transform: rotate(270deg);
-webkit-transition: .2s;
transition: opacity .2s;
}