How can I use the value from an input of type range to set the value of a jQuery UI Slider?

Question

I'm using the jQuery UI Slider as a fallback for the HTML5 input type=range. Initially, I want to use the value from the input-element to set the value for the jQuery UI Slider, but this doesn't seem to work. The input-element's value is set to 50, but when the slider is created it's value is 100. It works fine if I use value: 50 instead of value: $input.attr('value') . min: $input.attr('min') and max: $input.attr('max') works just fine.

Here is my code:

$(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

Try this:

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