CODEWITHSUNDEEP
javascriptjqueryjquery-uislider
kkk22555
kkk22555

Reputation: 13

How to get the min and max values from a jquery ui slide ranger into 2 separate variables?

I have a jquery ui slide ranger which has two prices. A min price and a max price. How can I put the min and max into seperate variables? I want to create if statements but not inside the slide ranger function but in a search button function. When the user clicks search, it will get the min price and the max price that the user selected and output results of products. Is this possible and how could i do this?

Here is my slide ranger code

$(function() {
  $( "#slider-range" ).slider({
    range: true,
    min: 249500,
    max: 750000,
    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 ) );
});

Thank you for your help.

Upvotes: 0

Views: 2894

Answers (1)

T J
T J

Reputation: 43156

You can access the min and max range of the slider using the option method as shown below:

$(function() {
  $("#slider-range").slider({
    range: true,
    min: 249500,
    max: 750000,
    values: [75, 300000]
  });
  $("button").click(function() {
    var min = $("#slider-range").slider("option", "min"),
      max = $("#slider-range").slider("option", "max")
    console.log("min: " + min+" max: " + max);
  });
});
<link href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="slider-range"></div>
<button>Search</button>

You can access the min and max of current range using the values option as shown below:

$(function() {
  $("#slider-range").slider({
    range: true,
    min: 249500,
    max: 750000,
    values: [75, 300000]
  });
  $("button").click(function() {
    var min = $("#slider-range").slider("option", "values")[0],
      max = $("#slider-range").slider("option", "values")[1];
    console.log("low: " + min+" high: " + max);
  });
});
<link href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="slider-range"></div>
<button>Search</button>

Upvotes: 4

Related Questions