Jquery Slider Progressbar

HTML

<div id="target"></div>

javascript

<script>
$(function () {
    $('#target').empty();
    $('<input>').appendTo('#target').attr({
        'name': 'slider',
        'id': 'slider',
        'data-highlight': 'true',
        'min': '0',
        'max': '100',
        'value': '50', //this is where you change the current value on load
        'type': 'range',
        'readonly': 'true'
    }).slider({
        create: function (event, ui) {
            $(this).parent().find('input').hide();
            $(this).parent().find('input').css('margin-left', '-9999px'); // Fix for some FF versions
            $(this).parent().find('.ui-slider-track').css('margin', '0 5px 0 5px');
            $(this).parent().find('.ui-slider-handle').hide();
        }
    }).slider("refresh");

    //this will prevent the value being updated on the front end.
    var sliderval = $("#slider").val();
    $("#slider").bind("change", function () {
        if ($(this).val() != sliderval) {
            $(this).val(sliderval);
            $(this).next().find("div.ui-slider-bg").css("width", sliderval + "%");
        }
    });
});
</script>