Can we use jQuery UI price range slider value with input text
Question
I'm using Jquery UI price range slider this is working perfectly but I want price value with input text and that will be editable.
Anybody can do it?
If anybody has any other plugin or custom code & suggestion then please share.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <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> <p> <label for="amount">Price range:</label> <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"> </p> <div id="slider-range"></div> </body> </html>
2 answers
solution1
3 ACCPTED 2017-07-27 08:28:57
There you go. Bind onchange event to inputs, remove readonly and that's it.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $(function() { $("#slider-range").slider({ range: true, min: 0, max: 500, values: [75, 300], slide: function(event, ui) { $("#amount_min").val(ui.values[0]); $("#amount_max").val(ui.values[1]); } }); $("#amount_min").val($("#slider-range").slider("values", 0)); $("#amount_max").val($("#slider-range").slider("values", 1)); $("#amount_min").change(function() { $("#slider-range").slider("values", 0, $(this).val()); }); $("#amount_max").change(function() { $("#slider-range").slider("values", 1, $(this).val()); }) }); </script> </head> <body> <p> <label for="amount">Price range:</label> $<input type="text" id="amount_min" style="border:0; color:#f6931f; font-weight:bold;"> $<input type="text" id="amount_max" style="border:0; color:#f6931f; font-weight:bold;"> </p> <div id="slider-range"></div> </body> </html>
solution2
0 2017-07-27 08:39:03
Here you go with one more solution https://jsfiddle.net/n4h6624h/
$( 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 ) ); $('#amount').focusout(function(){ var sliderVal = $(this).val(); var splitSliderVal = sliderVal.replace(/\\$/g, '').split('-'); $( "#slider-range" ).slider({ values: [ parseInt(splitSliderVal[0]), parseInt(splitSliderVal[1]) ] }); }); });
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can I use the value from an input of type range to set the value of a jQuery UI Slider?
jQuery UI price range slider handling decimals
How to alert price range slider value in jQuery?
jQuery ui range slider gives wrong value
Can we create a three handle HTML range slider without using jQuery ui
jQuery UI Slider (setting from text input)
JQuery ui range slider
Unable to use range slider wth text in jquery
Sending value from ui.value (jquery UI) of a slider to input
Can't show value of jquery ui slider
Related Tags