---
title: "Slider using BootStrap in ASP.Net"  
description: "In this blog , I’m explaining how to make slider using Bootstrap in ASP.Net  Example  :-In This Example we Create Slider Using BootStrap FileForm Desi"  
author: "Anonymous User"  
published: 2014-01-15  
updated: 2014-09-18  
canonical: https://www.mindstick.com/blog/631/slider-using-bootstrap-in-asp-dot-net  
category: "bootstrap"  
tags: ["bootstrap"]  
reading_time: 2 minutes  

---

# 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](https://www.mindstick.com/forum/156874/how-to-create-bootstrap-file-to-design-web-page-in-bootstrap-5)

##### 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](https://www.mindstick.com/forum/166/webservice-method) inside the $([document](https://www.mindstick.com/articles/328642/what-to-consider-while-choosing-a-software-documentation-tool)).ready([function](https://www.mindstick.com/articles/13001/multi-statement-table-valued-user-defined-function-in-sql-server) () {} function. And gives the [parameters](https://www.mindstick.com/articles/87/passing-parameters-in-c-sharp) 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](https://www.mindstick.com/articles/188403/website-to-download-photos-from-instagram) and add the above three [files](https://www.mindstick.com/articles/23302/the-importance-and-advantage-of-keeping-your-important-files-on-the-cloud) into your [projects](https://www.mindstick.com/articles/105927/how-to-excel-at-managing-multiple-projects) because it’s

mandatory for using the bootstrap [libraries](https://answers.mindstick.com/qa/49244/which-company-is-ahead-in-classification-of-data-for-libraries-innovations) 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

![Slider using BootStrap in ASP.Net](https://www.mindstick.com/blogs/e9d18fee-ffdc-4255-9f7c-c6d12a2fbf87/images/979a9628-e4e7-4dbe-bda2-8c7f6cb5200b.png)\

in my next post i'll explain about [Tab using BootStrap in ASP.Net](https://www.mindstick.com/blog/632/Tab%20using%20BootStrap%20in%20ASP%20Net)

---

Original Source: https://www.mindstick.com/blog/631/slider-using-bootstrap-in-asp-dot-net

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
