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.
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.