Question

I have this interesting obstacle on my project.

I am currently doing a MVC3 project which runs on tablets and smartphones. It includes a HTML5 slider with page navigation. The concept is very similar with “The Daily” app on iPad.

http://youtu.be/KHILJBw-104

The concept comes from the video 0:15 onwards.

I want to use HTML5 slider to navigate the pages. When I slide the slide bar, I use onchange to detect the value change in html5 slider

@using (Ajax.BeginForm("ViewFilter", new AjaxOptions { UpdateTargetId = "showpage" })){   
    <input name="sliderStatus"  id="sliderStatus" type="range" min="0" max="100" value="0" step="1"  onchange="$(this.form).submit();" />
</div>}

However the action “ViewFilter” keep rendered whenever I change the value of the slider.

Is there any possible way to deal with it such that the value will only be changed when we slide the slidebar and release?

Important: Jquery slider will not work on tablets and smartphones such that it is not draggable on the tablets browser, for instance, IE10 on Windows 8 and Safari on iPad.

Answer 1

if you what you want is for the event to fire after the user slides and then releases the mouse you may consider using the mouse up event which would be somethink like this or you can set timeout for your event or you can use onchnge with time interval such as the time it takes to scroll so the system will wait and fire the event as not firing it imidiatly after change

https://developer.mozilla.org/En/Window.setInterval // more on set interval

$('#sliderStatus').mouseup(function() {
  $(this.form).submit();
});