Is it possible to somehow associate the values ​​of the from and to range slider inputs when editing them (entering values ​​in the fields) with the getValues(values) function, which calculates the to - from difference?

Codepen example

  • At the moment, the calculation is performed only when dragging the sliders.
  • I change the sliders of the slider - it is calculated by total, I enter my values ​​in the input fields - it is not calculated by total)

 'use strict'; $(document).ready(function() { console.log('Hello, world!'); // ---------------------------------- Range slider jq ui $('.filter__slider-element').each(function() { var $this = $(this), container = $this.closest('.filter__slider'), min = parseInt($this.data('min')), max = parseInt($this.data('max')), from = container.find('.filter__slider-input-from'), to = container.find('.filter__slider-input-to'); from.change(function() { $('.filter__slider-element').slider('values', 0, from.val()); }); to.change(function() { $('.filter__slider-element').slider('values', 1, to.val()); }); $this.slider({ range: true, min: min, max: max, values: [min, max], slide: function(event, ui) { // При каждом перемещении var values = $(this).slider('option', 'values'); from.val(ui.values[0]); to.val(ui.values[1]); getValues(ui.values); }, // change: function(event, ui) { // В конце перетаскивания // getValues(ui.values); // }, create: function() { // При создании виджета var values = $(this).slider('option', 'values'); from.val(values[0]); to.val(values[1]); //getValues(); }, stop: function(event, ui) { // При завершении перетаскивания getValues(ui.values); } }); }); function getValues(values) { var total = 0; $('.filter__slider-element').each(function() { var values = $(this).slider("option", "values"); var dif = values[1] - values[0]; total += dif; }); $("#totals").text(total); } }); 
 .form { padding: 3rem 0; } 
 <link href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet" /> <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> <div class="container"> <div class="row"> <div class="col-md-8"> <form class="form"> <div class="form-group"> <div class="filter__slider"> <div class="filter__slider-display"> <div class="row"> <div class="col-sm-6"> <div class="filter__slider-left"> <span class="filter__slider-text">from</span> <input type="text" name="slider" class="form-control filter__slider-input filter__slider-input-from"> </div> </div> <div class="col-sm-6"> <div class="filter__slider-right"> <span class="filter__slider-text">to</span> <input type="text" name="slider" class="form-control filter__slider-input filter__slider-input-to"> </div> </div> </div> </div> <br /> <div class="filter__slider-element" data-min="0" data-max="100"></div> </div> </div> <div class="form-group"> <div class="filter__slider"> <div class="filter__slider-display"> <div class="row"> <div class="col-sm-6"> <div class="filter__slider-left"> <span class="filter__slider-text">from</span> <input type="text" name="slider" class="form-control filter__slider-input filter__slider-input-from"> </div> </div> <div class="col-sm-6"> <div class="filter__slider-right"> <span class="filter__slider-text">to</span> <input type="text" name="slider" class="form-control filter__slider-input filter__slider-input-to"> </div> </div> </div> </div> <br /> <div class="filter__slider-element" data-min="0" data-max="300"></div> </div> </div> <div class="form-group"> <div class="list-group-item list-group-item-success">Total: <span id="totals">0</span> </div> </div> <div class="rom-group"> <button type="submit" class="btn btn-success">отправить</button> </div> </form> </div> </div> </div>

    1 answer 1

    When setting the values property, the change event occurs, so it is worth uncommenting it and it will work.

     'use strict'; $(document).ready(function() { console.log('Hello, world!'); // ---------------------------------- Range slider jq ui $('.filter__slider-element').each(function() { var $this = $(this), container = $this.closest('.filter__slider'), min = parseInt($this.data('min')), max = parseInt($this.data('max')), from = container.find('.filter__slider-input-from'), to = container.find('.filter__slider-input-to'); from.change(function() { $this.slider('values', 0, from.val()); }); to.change(function() { $this.slider('values', 1, to.val()); }); $this.slider({ range: true, min: min, max: max, values: [min, max], slide: function(event, ui) { // При каждом перемещении var values = $(this).slider('option', 'values'); from.val(ui.values[0]); to.val(ui.values[1]); getValues(ui.values); }, change: function(event, ui) { // В конце перетаскивания console.log('change'); getValues(ui.values); }, create: function() { // При создании виджета var values = $(this).slider('option', 'values'); from.val(values[0]); to.val(values[1]); //getValues(); }, stop: function(event, ui) { // При завершении перетаскивания getValues(ui.values); } }); }); function getValues(values) { var total = 0; $('.filter__slider-element').each(function() { var values = $(this).slider("option", "values"); var dif = values[1] - values[0]; total += dif; }); $("#totals").text(total); } }); 
     .form { padding: 3rem 0; } 
     <link href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet" /> <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> <div class="container"> <div class="row"> <div class="col-md-8"> <form class="form"> <div class="form-group"> <div class="filter__slider"> <div class="filter__slider-display"> <div class="row"> <div class="col-sm-6"> <div class="filter__slider-left"> <span class="filter__slider-text">from</span> <input type="text" name="slider" class="form-control filter__slider-input filter__slider-input-from"> </div> </div> <div class="col-sm-6"> <div class="filter__slider-right"> <span class="filter__slider-text">to</span> <input type="text" name="slider" class="form-control filter__slider-input filter__slider-input-to"> </div> </div> </div> </div> <br /> <div class="filter__slider-element" data-min="0" data-max="100"></div> </div> </div> <div class="form-group"> <div class="filter__slider"> <div class="filter__slider-display"> <div class="row"> <div class="col-sm-6"> <div class="filter__slider-left"> <span class="filter__slider-text">from</span> <input type="text" name="slider" class="form-control filter__slider-input filter__slider-input-from"> </div> </div> <div class="col-sm-6"> <div class="filter__slider-right"> <span class="filter__slider-text">to</span> <input type="text" name="slider" class="form-control filter__slider-input filter__slider-input-to"> </div> </div> </div> </div> <br /> <div class="filter__slider-element" data-min="0" data-max="300"></div> </div> </div> <div class="form-group"> <div class="list-group-item list-group-item-success">Total: <span id="totals">0</span> </div> </div> <div class="rom-group"> <button type="submit" class="btn btn-success">отправить</button> </div> </form> </div> </div> </div>

    • Thank! I wonder why I didn’t work with him and I commented it out! - HamSter 4:21 pm
    • @ElenaSemenchenko, because it is called only at the end of the movement, that is, if there were only this handler, the values ​​would not change while the user moves there and there - Grundy