The problem is that when it should stop by reaching certain value, it starts glitching (going back and forth really fast).
It does not glitch every time, it usually glitches 2 out of 3 times. After one time refresh because it will not work a second time.
function number() {
var xd = 20;
var min = 0;
var max = 100 - min;
var mid = (100 - min) / 2 + min;
var x = Math.floor((Math.random() * max) + min);
//document.getElementById("roll").value = x;
document.getElementById("demo").innerHTML = x;
var b = setInterval(function() {
var newVal = $('#roll').val(function(i, val) {
if (val > x) {
return (+val - 0.1);
clearInterval(b);
} else {
return (+val + 0.1);
clearInterval(b);
}
});
}, 1);
if (x > mid) {
console.log("high");
} else {
console.log("low");
}
console.log(x);
}
function random() {
var counter = 6;
var a = setInterval(function() {
counter--;
if (counter >= 0) {
span = document.getElementById("count");
span.innerHTML = counter;
}
if (counter === 0) {
clearInterval(a);
span.innerHTML = '<h2>CountDown Complete!</h2>';
number();
}
}, 1000);
}body {}
p {}
button {}
input[type=range] {
-webkit-appearance: none;
border: 1px solid white;
width: 500px;
pointer-events: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 500px;
height: 5px;
background: #ddd;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 20px;
min-width: 3px;
max-width: 3px;
width: 3px;
background: #5CCA96;
margin-top: -7px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc;
}
input[type=range]::-moz-range-track {
width: 500px;
height: 5px;
background: #ddd;
border: none;
border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
border: none;
height: 20px;
width: 3px;
background: #5CCA96;
}
input[type=range]:-moz-focusring {
outline: 1px solid white;
outline-offset: -1px;
}
input[type=range]::-ms-track {
width: 500px;
height: 5px;
background: transparent;
border-color: transparent;
border-width: 6px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #777;
border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
background: #ddd;
border-radius: 10px;
}
input[type=range]::-ms-thumb {
border: none;
height: 20px;
width: 3px;
background: #5CCA96;
}
input[type=range]:focus::-ms-fill-lower {
background: #888;
}
input[type=range]:focus::-ms-fill-upper {
background: #ccc;
}<html>
<head>
<title>Random</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<button onclick="random()">Try it</button>
<div id="count"></div>
<p id="demo"></p>
<input type="range" id="roll" name="slider" min="0" max="100" value="50" step="0.01" />
<script src="script.js"></script>
</body>
</html>