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

Slider using BootStrap in ASP.Net


Bootstrap Bootstrap 
Ratings:
1 Comment(s)
 5246  View(s)
Rate this:

Slider using BootStrap in ASP.Net

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


bootstrap slider

By Abhishek Singh on   2 years ago
nice blog

Don't want to miss updates? Please click the below button!

Follow MindStick