How to Create a Slider Widgets in JQuery UI

JQuery UI Slider Widgets

The slider widget indicates a slider UI control with handles to get a range of numeric values. Learn how to create a slider widgets in JQuery UI with simple steps:

1. Create a new HTML document

To create an HTML file, we need to create a new document file and save it as .html extension, then your HTML file will be created. Inside the file, we write the basic HTML document structure code by linking jquery UI library files. If you haven’t jquery UI library files click here to see how to download Jquery UI files.

<link href="jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css">
<script src="jquery-ui/external/jquery/jquery.js" type="text/javascript"></script>
<script src="jquery-ui/jquery-ui.min.js" type="text/javascript"></script>

2. Create an HTML element

To create a progress bar widget, we need to create an empty <div> element or any other element. Then use the ID attribute of an element and you can name it however you like. In this guide, I named it “slider” as an example.

<div id="sliderr"></div>

3. Creating a Slider widget

Select your element using the jQuery selector and call the slider widget’s respective jQuery UI function on it as in the below example.

<script type ="text/javascript">
$("#slider").slider(); // min=0 and max=100
</script>

The final code should look like this:

<html>
<head>
	<title>Slider</title>
	<link  href="jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css">
	<script src="jquery-ui/external/jquery/jquery.js" type="text/javascript"></script>   
	<script src="jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="slider"></div>
 <script type ="text/javascript">
           $("#slider").slider();  
 </script>
</body>
</html>

Output:

jquery ui slider widgets

Leave a Reply