Question

So I have some JS which works as expected when you want to calculate 0 – 100% however when I want to limit it to 50% – 75% and I change the 1st input is goes backwards to 38% then works upto 75% any ideas on what’s happening here?

$(document).ready(function () 
{
    // Ok, now setup the slider for the application process
    $('.application-progress').slider(
    {
        range: "min",
        min: 50,
        max: 100,
        value: 50,
        animate: true,
        slide: function (event, ui) 
        {
            $("#progress").html(ui.value + "%");
        },
        disabled: true
    });

    $("#progress").html($(".application-progress").slider("value") + "%");

    $(".step-container input, .step-container select").change(function () 
    {
        $('.progress-container').removeClass('completed');
        var fields = $(".step-container input, .step-container select");
        var percentage = 75 * fields.filter(function () 
        {
            return $.trim(this.value) != "";
        }).length / fields.length;

        var roundedPercentage = Math.round(percentage);

        $(".application-progress").slider("value", roundedPercentage);
        $("#progress").html(roundedPercentage + "%");

        if (roundedPercentage == 100) 
        {
            $('.progress-container').addClass('completed');
        }
    });
});

Full code and working example can be found here:

Answer 1

Not sure about exactly what you want, but something like that seems to be better (changes commented in code)

$(document).ready(function() {
    var minval = 50; //you'll need them later, so global var.
    var maxval = 75; //idem
    // Ok, now setup the slider for the application process
    $('.application-progress').slider({
        range: "min",
        min: 0,
        max: 100,
        value: minval, //or a fixed value, as you want.
        animate: true,
        slide: function(event, ui) {
            $("#progress").html(ui.value + "%");
        },
        disabled: true
    });

    $("#progress").html($(".application-progress").slider("value") + "%");

    $(".step-container input, .step-container select").change(function() {
        $('.progress-container').removeClass('completed');
        var fields = $(".step-container input, .step-container select");
        var filled = fields.filter(function() {
            return $.trim(this.value) != "";
        }).length; //fileds "filled"

        var totalLength = fields.length; //all fields filled.
        var percentage = minval + ((maxval - minval) * filled / totalLength); //new calculation
        var roundedPercentage = Math.round(percentage);

        $(".application-progress").slider("value", roundedPercentage);
        $("#progress").html(roundedPercentage + "%");

        if (roundedPercentage == 100) { //roundedPercentage = max, not 100
            $('.progress-container').addClass('completed');
        }
    });
});

SqlFiddle