Is there a way to custom a scrollbar by using input type=range?
i know there is a way to custom scrollbar by webkit scrollbar, but i also want it to work on firefox.
so far, what I have is this
https://codepen.io/sir-j/pen/NWggGde
I basically linked my $(window).scrollTop() to the value of whatever the range is.
the problem with this is that my browser can scroll up and down when i change the range, but i cannot change the input range when i scroll up and down.
anyone has any idea?
Try to use scroll event and window.scrollY to getting scroll value
P.S. This is code with two way binding, you must only synchronize that:
var i = document.querySelector('input')
i.addEventListener('input', function () {
const num = parseNum(i.value);
document.getElementById('thescrolling2').innerHTML = num;
$(window).scrollTop(num);
})
window.addEventListener('scroll', function(e) {
i.value = parseNum(window.scrollY);
windowScrollTop = $(window).scrollTop();
document.getElementById('thescrolling1').innerHTML = parseNum(windowScrollTop);
}, false);
function parseNum(v) {
return Number(v).toFixed(2);
}