iPhone slider in Javascript - issue in Safari

Question

I am new to javascript an have used the following code from http://davidbcalhoun.com/2011/implementing-iphone-slider-unlock-with-input-type-range/

I'm having difficulty getting it to work in Safari, (it works perfectly in Chrome).

The code is given below, my apologies if this is something really obvious but I'm willing to learn :

(function(){
    var slider, sliderInput, sliderButton, sliderText, sliderTimeout, sliderOnchange, unlockCheck;
    slider = document.querySelector('.iphone-slider');
    sliderInput = slider.querySelector('input');
    sliderButton = sliderInput.querySelector('input::-webkit-slider-thumb');
    sliderText = slider.querySelector('span');
    unlockCheck = function(){
        if(sliderInput.value == 100) {
            sliderText.innerHTML = 'unlocked';
            sliderInput.value = 0;
            sliderText.style.opacity = 1;
        } else {
            setTimeout(function(){
                sliderInput.value = 0;
                sliderText.style.opacity = 1;
            }, 1000);
        }
    };

    sliderOnchange = function() {
        sliderText.style.opacity = ((100 - sliderInput.value) / 200);
        clearTimeout(sliderTimeout);
        sliderTimeout = setTimeout(unlockCheck, 300);
    };

    slider.onchange = sliderOnchange;
})();

Answer 1

It's both desktop Safari and mobile it's the unlock slider emulator in css3 and JavaScript... See link for details: http://davidbcalhoun.com/2011/implementing-iphone-slider-unlock-with-input-type-range/