Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • How to make price range UI using Jquery

    @abhishek.tiwari.458
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 366
    Comment on it

    Hello Reader if you wan to make range selector UI using jquery this blog will be helpfull to you. Lets start making this UI. First you have to create html file and it's code will go like this:-

    1. <!doctype html>  
    2. <html lang="en">  
    3.    <head>  
    4.       <meta charset="utf-8">  
    5.  
    6.       <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
    7.       <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
    8.       <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
    9.  
    10.    </head>  
    11.    <body>  
    12.  
    13.       <p>  
    14.          <label for="currency">Price range:</label>  
    15.          <input type="text" id="currency"   
    16.             style="border:0; color:green; font-weight:bold;">  
    17.       </p>  
    18.       <div id="oneDiv"></div>  
    19.    </body>  
    20. </html>

    Now create the Jquery script which which make UI selector in range. And it's code will go like this:-

    1.  <script>  
    2.          $(function() {  
    3.             $( "#oneDiv" ).slider({  
    4.                range:true,  
    5.                min: 0,  
    6.                max: 470,  
    7.                values: [ 39, 470 ],  
    8.                slide: function( event, ui ) {  
    9.                   $( "#currency" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );  
    10.                }  
    11.            });  
    12.          $( "#currency" ).val( "$" + $( "#oneDiv" ).slider( "values", 0 ) +  
    13.             " - $" + $( "#oneDiv" ).slider( "values", 1 ) );  
    14.          });  
    15.       </script>

    Now when you load this page you will see the range selector is shown up. When you select its minimum limit it will show the pointer value, Similarly if you select it's maximum value it will show it's pointer value. This type of UI is very usefull in making the searching the product with currency range. And you can easily attach it to your search page.

    javascript JQuery html
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: