blog

Home / DeveloperSection / Blogs / Slider using BootStrap in ASP.Net

Slider using BootStrap in ASP.Net

Anonymous User12892 15-Jan-2014

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:- 

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Slider.aspx.cs"Inherits="Slider"%>
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
    <title></title>
 
    <scriptsrc="Js/jquery-1.8.3.min.js"></script>
    <scriptsrc="Js/jquery-ui-1.9.2.custom.min.js"></script>
    <linkhref="Bootstrap/jquery-ui-1.10.3.custom.css"rel="stylesheet"/>
 
</head>
<body>
    <formid="form1"runat="server">
        <div>
            <center><h1>Horizontal Slider</h1></center>
            <hr/>
            <divid="hslider"></div>
        </div>
        <br/>
        <divstyle="display: inline; margin-left: 300px; height: 100%">
            <hr/>
            <center><h1>Vertical Slider</h1></center>
            <hr/>
            <center><divid="vslider"></div></center>
        </div>
    </form>
</body>
</html>
<scripttype="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 :- 

 

<scriptsrc="Js/jquery-1.8.3.min.js"></script>
<scriptsrc="Js/jquery-ui-1.9.2.custom.min.js"></script>
<linkhref="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 :-

<scripttype="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

Slider using BootStrap in ASP.Net

in my next post i'll explain aboutTab using BootStrap in ASP.Net


Updated 18-Sep-2014
I am a content writter !

Leave Comment

Comments

Liked By