Как связать инпуты с ползунком range slider для вывода результата?

#javascript #html #jquery #jquery_ui

Можно ли как-то связать значения инпутов from и to range slider при их редактировании
(ввод значений в поля) с функцией getValues(values), вычисляющей разницу to - from? 

Пример на codepen


На данный момент происходит вычисление только при перетаскивании ползунков.
Меняю ползунки слайдера - вычисляется total, ввожу в поля input свои значения - не
вычисляется 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;
}





  

    

      

        

          

            

              

                

                  

                    from
                    
                  
                

                

                  

                    to
                    
                  
                
              
            
            

            

          
        

        

          

            

              

                

                  

                    from
                    
                  
                

                

                  

                    to
                    
                  
                
              
            
            

            

          
        

        

          
Total: 0
          
        

        

          
        
      
    
  




    

Ответы

Ответ 1

При установке свойства values происходит событие change, поэтому его стоит раскомментировать
и все заработает.



'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;
}





  

    

      

        

          

            

              

                

                  

                    from
                    
                  
                

                

                  

                    to
                    
                  
                
              
            
            

            

          
        

        

          

            

              

                

                  

                    from
                    
                  
                

                

                  

                    to
                    
                  
                
              
            
            

            

          
        

        

          
Total: 0