Here you can download my example of the slider.

HTML:

<!DOCTYPE html>
<html>

	<head>
		<script type="text/javascript" src="/index.js"></script>
		<script type="text/javascript" src="/knockout-3.2.0.js"></script>
		<script type="text/javascript" src="/jquery-2.1.1.js"></script>
		<script type="text/javascript" src="/jquery-ui.js"></script>
		<link href="/jquery-ui.css" rel="stylesheet"></link>
	</head>

	<body onload="startSlider()">
		<h2 class="demoHeaders">Slider</h2>
		<div id="slider"></div>
	</body>

</html>

JS:

var startSlider = function () {
	$( "#slider" ).slider({
		range: "min"
	});
}

Example taken from here, and here.

HTML5 example:

<!DOCTYPE html>
<html>

	<head>
	</head>

	<body>
		<input type="range" name="points" min="0" max="10">
	<body>
	
</html>

Example taken from here.

So, I had a problem where ajax call was started, but user changed the page, and after ajax call was finished some js script will be executed and inf bubble will be shown to the user, in a place where it shouldn't be.

To check if page has changed you can use hash of a page:

$(window).hashchange(function () {
	self.xhr.abort();
	console.log("abort");
});

Test self.xhr.abort() is actually aborting ajax call...

$('#button').click(function (e) {
    if (e.clientX) {
        // physical click
    } else {
        // program click
    } 
});

From here.

As much as I understood, razor's

@Html.CheckBox("myInputName", false)

Will create HTML like:

<input id="myInputName" name="myInputName" type="checkbox" value="true" checked="checked">

<input name="myInputName" type="hidden" value="false" checked="checked">

If you want with jQuery to select just input which is not hidden, use following code:

$('input[name=myInputName]:not([type=hidden])'