<html> <head> <title></title> <script type="text/javascript"> function test() { var slider = document.getElementById("slider"); var x = slider.offsetWidth * 3 / 4; var y = slider.offsetHeight / 2; var event = document.createEvent("MouseEvent"); event.initMouseEvent("mousedown", true, true, document.defaultView, 1, 0, 0, x, y, false, false, false, false, 0, document); slider.dispatchEvent(event); } </script> </head> <body onload="test()"> <p> Test for <i><a href="http://bugs.webkit.org/show_bug.cgi?id=11621">http://bugs.webkit.org/show_bug.cgi?id=11621</a> REGRESSION (Native slider): slider thumb not updated when the mouse is dragged/released out of range</i>. </p> <p> The slider thumbs should be at the same horizontal position. </p> <input type="range" id="slider" value="30"> <br> <input type="range" value="70"> </body>