<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Range Slider</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script>
$(function () {
var divSlider = $("#slider");
divSlider.slider({
range: true,
min: 1,
max: 100,
values: [1, 100],
slide: function (event, ui) {
$("#txtMinRange").val(divSlider.slider('values', 0));
$("#txtMaxRange").val(divSlider.slider('values', 1));
},
stop: function (event, ui) {
$("#txtMinRange").val(ui.values[0]);
$("#txtMaxRange").val(ui.values[1]);
}
});
$("#txtMinRange").val(divSlider.slider('values', 0));
$("#txtMaxRange").val(divSlider.slider('values', 1));
$("#slider").animate({
background: 'blue',
width: 700,
}, 1000);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div style="padding: 2rem;width:100%;">
<input type="text" id="txtMinRange" style="width:10%;float:left;" />
<div id="slider" style="width: 75%;float:left;margin-left:1rem;margin-right:1rem;"></div>
<input type="text" id="txtMaxRange" style="width:10%;float:left;" />
</div>
</div>
</form>
</body>
</html>
