In this blog , I’m explaining how to make slider using Bootstrap in ASP.Net
Example :-
In This Example we Create Slider Using BootStrap File
Form Design:-
<%@ Page Language='C#' AutoEventWireup='true' CodeFile='Slider.aspx.cs' Inherits='Slider' %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat='server'>
<title></title>
<script src='Js/jquery-1.8.3.min.js'></script>
<script src='Js/jquery-ui-1.9.2.custom.min.js'></script>
<link href='Bootstrap/jquery-ui-1.10.3.custom.css' rel='stylesheet' />
</head>
<body>
<form id='form1' runat='server'>
<div>
<center><h1>Horizontal Slider</h1></center>
<hr />
<div id='hslider'></div>
</div>
<br />
<div style='display: inline; margin-left: 300px; height: 100%'>
<hr />
<center><h1>Vertical Slider</h1></center>
<hr />
<center><div id='vslider'></div></center>
</div>
</form>
</body>
</html>
<script type='text/javascript'>
$(document).ready(function () {
//Horizontal Slider
$('#hslider').slider({
range: true,
values: [17, 67]
});
//Vertical Slider
$('#vslider').slider({
orientation: 'vertical',
range: 'min',
min: 0,
max: 100,
value: 60,
slide: function (event, ui) {
}
});
});
</script>
Firstly create two div tag and give the div id hslider and vslider. Call the slider() method inside the $(document).ready(function () {} function. And gives the parameters of slider method.
Use this BootStrap File :-
<script src='Js/jquery-1.8.3.min.js'></script>
<script src='Js/jquery-ui-1.9.2.custom.min.js'></script>
<link href='Bootstrap/jquery-ui-1.10.3.custom.css' rel='stylesheet' />
Download and add the above three files into your projects because it’s
mandatory for using the bootstrap libraries and methods.
Use slider Method :-
<script type='text/javascript'>
$(document).ready(function () {
//Horizontal Slider
$('#hslider').slider({
range: true,
values: [17, 67]
});
//Vertical Slider
$('#vslider').slider({
orientation: 'vertical',
range: 'min',
min: 0,
max: 100,
value: 60,
slide: function (event, ui) {
}
});
});
</script>
Output
in my next post i'll explain about Tab using BootStrap in ASP.Net
Last updated:9/18/2014 1:24:20 PM
Abhishek Singh
nice blog