How to add jQuery UI Slider Input Control to HTML Form

The jQuery UI Slider Input Control can be used in places where the user input should be bound to a certain range of numeric values. We can use textbox and slider control together to force the user to pick up the input value by sliding the slider button. This way we can have more control over the form input values.

Required Libraries for Slider Control

For this tutorial we need both jQuery and jQuery UI library. So if you don't have the latest versions, download them first.

Adding Slider Control to HTML Form

Now create a HTML file and include all the required CSS and JS files in the HTML file.

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

Alternatively, you can load these files from google api library.

<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>

Next add a textbox and a div block which we will turn up into the slider control with the help of jQuery UI plugin.

<form id="form1" method="post" action="#">
     <label for="price">price</label>
     <input id="price" type="text" disabled="disabled" />
     <div id="slider-price"></div>
     <input type="submit" id="submit" value="Submit" />
</form>

Now add this jQuery script to the HTML file.

<script type="text/javascript">
$(function() {
     $( "#slider-price" ).slider({
          range: "min",
          min: 1,
          max: 20,
          value: 5,
          slide: function( event, ui ) {
               $( "#price" ).val( ui.value );
          }
     });
     $("#price").val($("#slider-price").slider("value"));
});
</script>

Done. Having added the slider control and bounded it to the textbox, now when the user slides the slider control, its corresponding value will be picked up by the textbox and displayed.

Here is the complete HTML code.

<!DOCTYPE html>
<html>
<head>
<title>Slider Input Demo</title>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" />
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>

<style type="text/css">
#slider-price {
     display: inline-block;
     margin: 0 10px;
     width: 150px;
}

#price {
     width: 25px;
}
</style>

</head>
<body>

<form id="form1" method="post" action="#">
     <label for="price">price</label>
     <input id="price" type="text" disabled="disabled" />
     <div id="slider-price"></div>
     <input type="submit" id="submit" value="Submit" />
</form>
     
<script type="text/javascript">
$(function() {
     $( "#slider-price" ).slider({
          range: "min",
          min: 1,
          max: 20,
          value: 5,
          slide: function( event, ui ) {
               $( "#price" ).val( ui.value );
          }
     });
     $("#price").val($("#slider-price").slider("value"));
});
</script>
</body>
</html>

Hope you have enjoyed this tutorial on adding jQuery UI slider to the HTML page.

Last-Modified: May-25-2015

How to add jQuery UI Slider Input Control to HTML Form

Required Libraries for Slider Control

Adding Slider Control to HTML Form

6 comments: