Modified Slider UI with 2 hidden inputs and showing value in html.

Modified Slider UI with 2 hidden inputs and showing value in html.

I've made a modified version for Range Slider UI . You can use 2 hidden Inputs. In each hidden input is 1 value and values is also in html with live changing. Here is the code if anyone wants it , you can use it.If you know a better solution for this, don't hesitate and post it to comments.Together we can make it better. I am begginer so take a look at it.

  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="utf-8">
  6. <title>jQuery UI Slider - Range slider</title>
  7. <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
  8. <script src="../../../jquery-1.7.2.min.js"></script>
  9. <script src="../../ui/jquery.ui.core.js"></script>
  10. <script src="../../ui/jquery.ui.widget.js"></script>
  11. <script src="../../ui/jquery.ui.mouse.js"></script>
  12. <script src="../../ui/jquery.ui.slider.js"></script>
  13. <link rel="stylesheet" href="../demos.css">
  14. <style>
  15. #demo-frame > div.demo { padding: 10px !important; }
  16.   #text_price {
  17.    padding-bottom:5px;
  18.   }
  19. </style>
  20. <script>
  21. $(function() {
  22. $( "#slider-range" ).slider({
  23. range: true,
  24. min: 0,
  25. max: 500,
  26. values: [ 75, 300 ],
  27. slide: function( event, ui ) {
  28. $( "#amount_1" ).val( ui.values[ 0 ] );
  29.         $( "#amount_2" ).val( ui.values[ 1 ] );
  30.         $( "#amount_1_show" ).text( ui.values[ 0 ] );
  31.         $( "#amount_2_show" ).text( ui.values[ 1 ] ); 
  32. }
  33. });
  34.     $( "#amount_1" ).val( $( "#slider-range" ).slider( "values", 0 ) );
  35.     $( "#amount_2" ).val( $( "#slider-range" ).slider( "values", 1 ) );
  36.     
  37.     $( "#amount_1_show" ).text( $( "#slider-range" ).slider( "values", 0 ) );
  38.     $( "#amount_2_show" ).text( $( "#slider-range" ).slider( "values", 1 ) );

  40. });
  41. </script>
  42. </head>
  43. <body>

  45. <div class="demo" style="width:300px;position:absolute;font-size:12px;">

  47.   <div id="text_price">
  48.   Price range:
  49.   <span id="amount_1_show" style="color:#f6931f; font-weight:bold;"></span> -
  50.   <span id="amount_2_show" style="color:#f6931f; font-weight:bold;"></span>
  51.   </div>
  52.   
  53.   <input type="hidden" id="amount_1" style="border:0; color:#f6931f; font-weight:bold;" />
  54.   <input type="hidden" id="amount_2" style="border:0; color:#f6931f; font-weight:bold;" />

  56. <div id="slider-range"></div>

  58. </div>

  60. </body>
  61. </html>