Get the value from slider range function UI javascript

Question

I have slider for price range search function using UI and javascript.

Here is the code.

<link rel="stylesheet" href="//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>

Here is the javascript.

<script>
$( function() {
$( "#slider-range" ).slider({
  range: true,
  min: 0,
  max: 10000,
  values: [ 2000, 5000 ],
  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>

Here is the html code.

<input type="text" id="amount">
<input value="<?php echo "ui.values[ 0 ]";?>" name="min-price" id="select-min-price" type="hidden">
<input value="<?php echo "ui.values[ 1 ]";?>" name="max-price" id="select-max-price" type="hidden">
<div id="slider-range"></div>

My question is how can I get the value of min and max from that slider range so I can put into the field. (what should I put on the value from field min-price and field max-price)

Possible duplicate of https://stackoverflow.com/questions/5801770/jquery-ui-slider-min-max-values based on your question. — Roshan, Jan 28 '19 at 07:45
@BenM hi dear my code is working fine, my question is how can I get separatedly namefield for min and max price — Wilda Sagita, Jan 28 '19 at 07:55
your formatting is weird you dont need spaces around delimited content inside delimiters — chiliNUT, Jan 28 '19 at 07:58

score 0 · Answer 1 · answered Jan 28 '19 at 09:31

You can set values of min-price and max-price in the slider function, as below:

$( function() {
  $( "#slider-range" ).slider({
   range: true,
   min: 0,
   max: 10000,
   values: [ 2000, 5000 ],
   slide: function( event, ui ) {
   $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );

     $("#select-min-price").val(ui.values[ 0 ]);
     $("#select-max-price").val(ui.values[ 1 ]);
   }
});    
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) + " - $" + $( "#slider-range" ).slider( "values", 1 ) ); });

You can have a look here: https://jsfiddle.net/ashokgharpankar/dy29xkq7/10/

Get the value from slider range function UI javascript

1 Answers1