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> <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>
try this,
$(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="৳" >bdt</option> </select> <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
Post a Comment