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]);
    
  }
});

<linkhref="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css"  /><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><divid="slider"></div><ulclass="result"><li>A : <spanid="a">0</span></li><li>B : <spanid="b">50000</span></li><li>C : <spanid="c">100000</span></li></ul><ulclass="result"><li>X: <spanid="x">0</span></li><li>Y: <spanid="y">50000</span></li><li>Z: <spanid="z">100000</span></li></ul>