Search code examples
javascripthtmlcordovarangephonegap

rangeslider.js calling onchange() twice


I am developing a phonegap application, and I am using rangeslider to make the regular <input type=range> elements more visually appealing. However I ran into a problem with the following function which is called when the onchange() event fires:

function store_slider(){
    store_slider_val=document.getElementById("slider").value; //gets the value of the slider
    if(store_slider_val==100){
        //if slider is at 100 give a notification
        navigator.notification.confirm('Mark task as complete?',task_complete_handle,'Hey there!','YES,NO');
        function task_complete_handle(button){
            if(button==1){
                //do stuff
            }
            else{
                //set the slider to 90
                $('#slider').val(90).change();
            }
        }
    }
    else{
        //do other stuff
    }
}

The issue I'm facing is that the when the slider is at 100 the notification produced by navigator.notification.confirm('Mark task as complete?',task_complete_handle,'Hey there!','YES,NO'); appears twice instead of once when I try the app in my phone(Appears only once when I run it in my laptop browser). When I don't use rangeslider the code works as expected.

How can I fix this issue? Rangeslider was a perfect and simple solution to making range inputs look better and I would really like to continue using this and not switch to another slider plugin.


Solution

  • I solved this problem only by completely removing rangeslider.js and using another plugin as it seems it is connected to the way rangeslider is implemented.