uislider - How to change the value dynamically in jquery ui price range slider -


i using jquery ui price range slider . , have option selecting currency . problem if user select different currency range slider still same . want change slider range value in different currency upon changing currency . right show range in dollar , want when user select euro , range changed euro here doing

<title>jquery ui slider - range slider</title>   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">   <script src="//code.jquery.com/jquery-1.9.1.js"></script>   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>   <link rel="stylesheet" href="/resources/demos/style.css">   <script>   $(function() {     $( "#slider-range" ).slider({       range: true,       min: 0,       max: 500,       values: [ 75, 300 ],       slide: function( event, ui ) {         $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );       }     });     $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +       " - $" + $( "#slider-range" ).slider( "values", 1 ) );   });   </script> </head> <body> <select name=currency class=f15>                     <option value=usd selected>usd</option>                     <option value=bdt >bdt</option>                     </select> &nbsp;  <p>   <label for="amount">price range:</label>   <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"> </p>  <div id="slider-range"></div> 

fiddle

try this,

demo

$(function() {     $('select').change(function(){      $( "#amount" ).val( $('select').val() + $( "#slider-range" ).slider( "values", 0 ) +       " - "+ $('select').val() + $( "#slider-range" ).slider( "values", 1 ) );     })     $( "#slider-range" ).slider({       range: true,       min: 0,       max: 500,       values: [ 75, 300 ],       slide: function( event, ui ) {         $( "#amount" ).val( $('select').val() + ui.values[ 0 ] + " - "+ $('select').val() + ui.values[ 1 ] );       }     });     $( "#amount" ).val( $('select').val() + $( "#slider-range" ).slider( "values", 0 ) +       " - "+ $('select').val() + $( "#slider-range" ).slider( "values", 1 ) );   }); 

html:

<select name=currency class=f15>                     <option value="$" selected>usd</option>                     <option value="&#2547;" >bdt</option>                     </select> &nbsp;  <p>   <label for="amount">price range:</label>   <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"> </p>  <div id="slider-range"></div> 

Comments

Popular posts from this blog

python - Subclassed QStyledItemDelegate ignores Stylesheet -

java - HttpClient 3.1 Connection pooling vs HttpClient 4.3.2 -

SQL: Divide the sum of values in one table with the count of rows in another -