How to add jQuery UI Slider Input Control to HTML Form

On 8/14/2014

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.

jquery-ui-slider-input-control

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.

Recommended Read: Learn jQuery addclass removeclass methods onclick

Recommended Read: Use PHP json_decode function to parse json object and insert into MySQL Database

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.

Recommended Read: 10 Amazing CSS Drop Caps Effects you can Copy Paste

Recommended Read: How to Create Login Form in CodeIgniter, MySQL and Twitter Bootstrap

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

6 comments:


  1. This technical post helps me to improve my skills set, thanks for this wonder article I expect your upcoming blog, so keep sharing...
    Regards,
    Angularjs course in chennai|Angularjs training in chennai

    ReplyDelete
  2. The strategy you have posted on this technology helped me to get into the next level and had lot of information in it. The angular js programming language is very popular which are most widely used.
    Angularjs Training in Chennai | Angularjs training Chennai

    ReplyDelete
  3. Very informative piece of article, this blog has helped me to understand the concept even better. Keep on blogging.
    oracle training in chennai

    ReplyDelete
  4. Thanks for posting this useful content, Good to know about new things here, Let me share this,
    AngularJS Training in Chennai | AngularJS Training | Best AngularJS Training Institute in Chennai

    ReplyDelete

Contact Form

Name

Email *

Message *