CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-slider
Mona Coder
Mona Coder

Reputation: 6316

Set max value of slider in jQuery UI dynamically based on first slider state

How can I set up the second slider #slider2 max value based on state of first slider #slider1?

$("#slider1").slider({
  value: 100,
  min: 0,
  max: 500,
  step: 50,
  slide: function(event, ui) {
    $("#slider-value").html(ui.value);
  }
});

$("#slider-value").html($('#slider').slider('value'));


$("#slider2").slider({
  value: 100,
  min: 0,
  step: 50,
  slide: function(event, ui) {

  }
});

Upvotes: 0

Views: 1051

Answers (1)

Twisty
Twisty

Reputation: 30893

Here is a basic example. See more here: http://api.jqueryui.com/slider/#option-max

$(function() {
  $("#slider1").slider({
    value: 100,
    min: 0,
    max: 500,
    step: 50,
    slide: function(event, ui) {
      $("#slider1-value").val(ui.value);
      $("#slider2").slider("option", "max", ui.value * 1.5);
      var max = $("#slider2").slider("option", "max");
      $("#slider2-max").val(max);
    }
  });

  $("#slider2").slider({
    value: 100,
    min: 0,
    max: 500,
    step: 50,
    slide: function(event, ui) {
      $("#slider2-value").val(ui.value);
    }
  });

  $("#slider1-value").val($('#slider1').slider('value'));
  $("#slider2-value").val($('#slider2').slider('value'));
});
p input {
  width: 3em;
}
<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>
<p>
  <label for="amount">Slider #1 Value:</label>
  <input type="text" id="slider1-value" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider1"></div>
<p>
  <label for="amount">Slider #2 Value:</label>
  <input type="text" id="slider2-value" readonly style="border:0; color:#f6931f; font-weight:bold;">
  <label for="amount">Slider #2 Max:</label>
  <input type="text" id="slider2-max" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider2"></div>

.slider("option", "max") will get the value and .slider("option", "max", 500) will set the value.

Upvotes: 1

Related Questions