Question

Basically a couple of issues here as the ui-slider ucas points & grades that appear below are not ‘live’ per-say I would like them to appear as the slider is used. So all the calculations are happening straight away, so as you slide they change, not when the user stops.

Also, How would I go about styling the bar so as the bar moves up the bit that has been slid will turn a certain colour.

For a live version: http://universitycompare.com

My jQuery for the slider’s can be seen below:

jQuery(document).ready(function($) {

    var slider1 = $("#slider").slider({
        max: 420,
        min: 0,
        step: 20,
        change: function(event, ui) {
            $("#s2").html(ui.value);    
            $("#s2")
        },
        stop:Calculate
    });

    var slider2 = $("#slider2").slider({
        max: 420,
        min: 0,
        step: 20,
        change: function(event, ui) {
            $("#s3").html(ui.value);    
            $("#s3")
        },
        stop:Calculate

    });

    var div = $('#s4'); //cache this object in a variable if you'll be using it multiple times
    slide: function Calculate(){
        var val1 = slider1.slider('option', 'value');
        var val2 = slider2.slider('option', 'value');

        var finalVal = (val1 + val2) / 2;
        //update the ui
            if (finalVal === 0) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('N / A');
            }

            if (finalVal === 20) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('N / A');
            }

            if (finalVal === 40) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('N / A');
            }

            if (finalVal === 60) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('N / A');
            }

            if (finalVal === 80) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('N / A');
            }

            if (finalVal === 100) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('N / A');
            }

            if (finalVal === 120) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('EEE');
            }

            if (finalVal === 140) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('DEE');
            }

            if (finalVal === 160) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('DDE');
            }

            if (finalVal === 180) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('DDD');
            }

            if (finalVal === 200) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('CDD');
            }

            if (finalVal === 220) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('CCD');
            }

            if (finalVal === 240) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('CCC');
            }

             if (finalVal === 260) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('BCC');
            }

             if (finalVal === 280) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('BBC');
            }

            if (finalVal === 300) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('BBB');
            }

            if (finalVal === 320) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('ABB');
            }

            if (finalVal === 340) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('AAB');
            }

            if (finalVal === 360) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('AAA');
            }

            if (finalVal === 380) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('A*AA');
            }

            if (finalVal === 400) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('A*A*A');
            }

            if (finalVal === 420) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('A*A*A*');
            }

    }
});

The CSS for the slider is here also, but doesn’t seem to change colour:

/* Slider
----------------------------------*/
.ui-slider { position: relative; text-align: left; background-color:#ffdd4e; height:7px; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }

.ui-slider-horizontal { height: 7px; }
.ui-slider-horizontal .ui-slider-handle { top: -.5em; margin-left: -.6em; background-color:#ffdd4e; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

.ui-widget-header { background-color:#0071bc !important; height:8px !important; left:1px !important; top:1px !important; position:absolute !important; }

Answer 1

Try this jsFiddle example.

To both your sliders I added a call to your calculate function to the slider’s slide event.

slide: Calculate,

Update:

To show the slider values, use this instead:

slide: function(event, ui) {
    Calculate();
    $("#s2").html(ui.value);
},

jsFiddle example

Note that in this fiddle I changed your CSS to make the values visible (e.g. you had white on white).