Cannot update rangeslider.js with programatically loaded attributes

Question

I'm trying to create a graph editor using rangeslider.js plugin but somehow it doesn't update bars properly (most of the time it doesn't work at all). I have a working demo here but also created a simplified Fiddle for it. Sometimes it helps when I execute click in my script twice (not in fiddle, don't know why either). Any help much appreciated!

$(function() {
var $document   = $(document),
    $inputRange = $('input[type="range"]');

function valueOutput(element) {
    var value = element.value,
    output = element.parentNode.getElementsByTagName('output')[0];
    output.innerHTML = value;
}
for (var i = $inputRange.length - 1; i >= 0; i--) {
    valueOutput($inputRange[i]);
};
$document.on('input', 'input[type="range"]', function(e) {
    valueOutput(e.target);
});

$document.on('input', '#graph-kw input', function(e) {
    $stock_kw = $('#jform_stock_kw').val();
    $remap_kw = $('#jform_remap_kw').val();
    $stock_vals = $('#graph-kw output.stock-kw');
    $remap_vals = $('#graph-kw output.remapped-kw');

    $('#jform_graph_stock_kw').val($stock_vals.map(function() {
        value = $(this).val();
        if(value>0) return (value/$stock_kw).toFixed(3);
    }).get().join(','));
    $('#jform_graph_remap_kw').val($remap_vals.map(function() {
        value = $(this).val();
        if(value>0) return (value/$remap_kw).toFixed(3);
    }).get().join(','));
});

$document.on('input', '#graph-nm input', function(e) {
    $stock_nm = $('#jform_stock_nm').val();
    $remap_nm = $('#jform_remap_nm').val();
    $stock_vals = $('#graph-nm output.stock-nm');
    $remap_vals = $('#graph-nm output.remapped-nm');

    $('#jform_graph_stock_nm').val($stock_vals.map(function() {
        value = $(this).val();
        if(value>0) return (value/$stock_nm).toFixed(3);
    }).get().join(','));
    $('#jform_graph_remap_nm').val($remap_vals.map(function() {
        value = $(this).val();
        if(value>0) return (value/$remap_nm).toFixed(3);
    }).get().join(','));
});

$inputRange.rangeslider({
  polyfill: false
});


$('#jform_engine_type,#jform_engine_supercharged').on('change', function() {
    var $fuel = $('#jform_engine_type > input[type="radio"]:checked').val();
    var $turbo = $('#jform_engine_supercharged > input[type="radio"]:checked').val();
    if($turbo !== undefined && $fuel !== undefined) {
        if($turbo == "yes" && $fuel == "Diesel") $('#jform_visual_graph0').prop('checked',true);
        if($turbo == "no" && $fuel == "Diesel") $('#jform_visual_graph1').prop('checked',true);
        if($turbo == "yes" && $fuel == "Gasoline") $('#jform_visual_graph2').prop('checked',true);
        if($turbo == "no" && $fuel == "Gasoline") $('#jform_visual_graph3').prop('checked',true);
        $('#jform_visual_graph').change();
    }
});
$('#jform_visual_graph').on('change', function() {
    var $button = $(this).find(':checked');
    var $label = $('label[for='+$button.attr('id')+']').html();
    $('#jform_visual_load').attr('data-id',$button.val()).html('<span class="icon icon-refresh"></span> '+$label);
});
$('#jform_visual_graph').append('<button href="#" id="jform_visual_load"><span class="icon icon-refresh"></span></button>');

$('#jform_visual_load').on('click', function(e) {
    e.preventDefault();
    var $el = $(this);
    $el.prop('disabled',true);
    $stock_kw = $('#jform_stock_kw').val();
    $remap_kw = $('#jform_remap_kw').val();
    $stock_nm = $('#jform_stock_nm').val();
    $remap_nm = $('#jform_remap_nm').val();

    $.ajax({
        'global': false,
        'url': $el.data('id')+'_kw.json',
        'dataType': "json",
        'success': function (data) {
            json = data;
            for(i=0, len=json[0].length; i < len; i++) {
                stock_val = Math.round($stock_kw * json[0][i]);
                remap_val = Math.round($remap_kw * json[1][i]);
                $('#stock_kw_'+i+' > input').attr({value: stock_val, max: $remap_kw}).prop('disabled',false).siblings('output').val(stock_val);
                $('#remap_kw_'+i+' > input').attr({value: remap_val, max: $remap_kw}).prop('disabled',false).siblings('output').val(remap_val);
            }
            $('#graph-kw input').rangeslider('update', true);
        }
    });

    $.ajax({
        'global': false,
        'url': $el.data('id')+'_nm.json',
        'dataType': "json",
        'success': function (data) {
            json = data;
            for(i=0, len=json[0].length; i < len; ++i) {
                stock_val = Math.round($stock_nm * json[1][i]);
                remap_val = Math.round($remap_nm * json[0][i]);
                $('#stock_nm_'+i+' > input').attr({value: stock_val, max: $remap_nm}).prop('disabled',false).siblings('output').val(stock_val);
                $('#remap_nm_'+i+' > input').attr({value: remap_val, max: $remap_nm}).prop('disabled',false).siblings('output').val(remap_val);
            }
            $('#graph-nm input').rangeslider('update', true);
        }
    });
});
});

Answer 1

It turned out, that the problem is in jQuery itself.

None of $('#stock_kw_'+i+' > input').attr({value: stock_val}) and $('#stock_kw_'+i+' > input').val(stock_val) updates input[type=range] so I replaced jQuery with good old basic javascript and now it works perfectly (with or without rangeslider.js)