Как я могу использовать значение из диапазона ввода типов, чтобы установить значение ползунка пользовательского интерфейса jQuery?

Question

Я использую ползунок пользовательского интерфейса jQuery в качестве запасного варианта для диапазона ввода HTML5 type = range. Сначала я хочу использовать значение из элемента input, чтобы установить значение для ползунка пользовательского интерфейса jQuery, но это, похоже, не работает. Значение элемента ввода установлено равным 50, но при создании ползунка его значение равно 100. Оно работает нормально, если я использую value: 50 вместо value: $input.attr('value'). min: $input.attr('min') и max: $input.attr('max') работает просто отлично.

Вот мой код:

$(document).ready(function(){

    sliderFallback();

});


function sliderFallback(){ 
    $('input[type=range]').each(function() {  
        var $input = $(this);  
        var $slider = $('<div id="' + $input.attr('id') + '" class="' + $input.attr('class') + '"></div>');  


        $slider.slider({  
            min: $input.attr('min'),  
            max: $input.attr('max'),
            value: $input.attr('value'),    
            slide: function(e, ui) {  
                $(this).val(ui.value); 
            }  
        });
        $input.after($slider).hide();
    }); 
}

Answer 1

Попробуйте это:

      function sliderFallback(){ 
          $('input[type=range]').each(function() {  
              var $input = $(this);  
              var $slider = $('<div id="' + $input.attr('id') + '" class="' + $input.attr('class') + '"></div>');  

              var val = parseInt($(this).val());

              $slider.slider({  
                  min: $input.attr('min'),  
                  max: $input.attr('max'),
                  value: val,    
                  slide: function(e, ui) {  
                      $(this).val(ui.value); 
                  }  
              });
              $input.after($slider).hide();
          }); 
      }