CODEWITHSUNDEEP
javascriptjquerycsshtml
Ishpreet
Ishpreet

Reputation: 169

Styled <input type="range"> made to redirect not working on touch devices

I'm trying to make a slider, which on reaching a specific value, redirects to another url. The code is http://jsfiddle.net/9vs2n/
HTML:-

<div id="slide-wrap">
<div id="over">
    <div id="overin"></div>
</div>
<input type="range" id="in" class="slideToUnlock" value="0" max="100">
</div>


CSS:-

body {
color:white;
background: #323232;
margin:0;
padding:0;
}
#over {
width:80%;
border:solid thick rgba(255, 255, 255, 0.5);
margin:0 auto;
padding:0;
height:55px;
display:block;
position:relative;
background:rgba(255, 255, 255, 0.75);
border-bottom-left-radius:1em;
border-top-right-radius:1em;
}
#overin {
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
background:#60a917;
width:75px;
height:55px;
display:block;
border-bottom-left-radius:1em;
border-top-right-radius:1em;
}
#in {
outline:none;
-moz-appearance:none;
-webkit-appearance:none;
appearance:none;
width:80%;
margin:0 auto;
margin-top:-55px;
padding:0;
height:55px;
display:block;
position:relative;
background:rgba(0, 0, 0, 0);
}
#overin:before {
color: white;
position:relative;
right:10px;
top: -10px;
width:99%;
font-size: 56px;
font-weight: bold;
content:">";
display:inline-block;
text-align:end;
}
#in::-webkit-slider-thumb {
cursor:pointer;
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
background:rgba(0, 0, 0, 0);
width:75px;
height:55px;
display:block;
}
#over:before {
content:"slide to continue";
color: white;
position: absolute;
left: 100px;
top: 10px;
z-index: -1;
font-size: 32px;
}
#slide-wrap {
margin:10px auto;
}


JavaScript:-

document.getElementById('in').onmouseup = function () {
var val = document.getElementById('in').value;
if (val >= 50) {

    window.location.href = "http://www.example.com/";
} else {
    this.value = 0;
    zero()
}
}

document.getElementById('in').onmousemove = function () {
enlarge();
}

function enlarge() {
if (document.getElementById('in').value > 10) {
    document.getElementById('overin').style.width = document.getElementById('in').value + "%";
}
}

function zero() {
document.getElementById('overin').style.width = '80px';
}

setInterval(loop1(), 1);

function loop1() {
document.getElementById('over').style.width = document.getElementById('in').style.width;
}

It works properly, but the problem is that it's not working on touch devices, i've tried it on ipad, please try and try to solve this. The page is available at https://dl.dropboxusercontent.com/u/99185097/donotdelete/index.html

Upvotes: 0

Views: 1828

Answers (1)

krishwader
krishwader

Reputation: 11371

Simple. You'll have to add some touch events to this. onmouseup & onmousestart will trigger only mouse events and from what I've seen, doesnt work on touch screens. The events you have to add are touchmove & touchend as well. Here's a reference link from MDN for touch events of HTML5.

This is how your code needs to be structured :

var el = document.getElementById('in');

//mouse events
//gave names to the functions bound this, since w'll be using them two times. 
el.onmousemove = enlarge;
el.onmouseup = redirect;


//touch events 
//check if device has touch screen 
// CREDIT : http://stackoverflow.com/a/4819886/1217785
if (is_touch_device()) {
    console.log(true);
    //onmousemove = touchmove
    el.addEventListener("touchmove", enlarge, false)
    //onmouseup = touchend
    el.addEventListener("touchend", redirect, false)
}

//this function checks whether the device is a touch screen or not, else no binding will be done.
function is_touch_device() {
    var isTouch = 'ontouchstart' in window ||
        'onmsgesturechange' in window;
    
    console.log(isTouch);
    return isTouch;
};

//the rest of your functions

function redirect() {
    var val = document.getElementById('in').value;
    if (val >= 50) {

        window.location.href = "http://www.example.com/";
    } else {
        this.value = 0;
        zero()
    }
}


function enlarge() {
    if (document.getElementById('in').value > 10) {
        document.getElementById('overin').style.width = document.getElementById('in').value + "%";
    }
}

//other code

And here's the updated demo : http://jsfiddle.net/hungerpain/9vs2n/6/

Hope this helps!

Upvotes: 2

Related Questions