Know The Value Between 2 Inputs Slider Jquery

I have made this question to create a slider with 2/3 inputs. Here is the link: JQuery: a slider with 3 inputs possible? How can I get the value between all of 2 choosen inputs ? C

Solution 1:

You can use the slide event to detect the values of the sliders and assign them respectively from the given picture

i understand that if we have 3 sliders x,y and z then

a=x;

b=x-y;

c=z-y;

You can get the slider values from the ui object passed in the slide( event, ui ) event, which has the ui.values array holding the value of all the slider handle's current position, see a demo below

$("#slider").slider({
  min: 0,
  max: 100000,
  values: [0, 50000, 100000],
  slide: function(event, ui) {
    //console.log(ui.values);
    let a = ui.values[0];
    let b = ui.values[1] - ui.values[0];
    let c = ui.values[2] - ui.values[1];

    $("#a").html(a);
    $("#b").html(b);
    $("#c").html(c);
    
    $("#x").html(ui.values[0]);
    $("#y").html(ui.values[1]);
    $("#z").html(ui.values[2]);
    
  }
});

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css"  />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="slider"></div>

<ul class="result">
  <li>A : <span id="a">0</span></li>
  <li>B : <span id="b">50000</span></li>
  <li>C : <span id="c">100000</span></li>
</ul>
<ul class="result">
  <li>X: <span id="x">0</span></li>
  <li>Y: <span id="y">50000</span></li>
  <li>Z: <span id="z">100000</span></li>
</ul>