Total max value with for multiple dependent jQuery-UI Slider

I'm trying to make a skills-maker-like interface with 4 jQuery-UI sliders (first time I use this UI library).

Sliders are limited 开发者_如何学Cto a total amount (here 10) and I'm trying to stop the increase slide when this limit is reached. I readed this, this and this but the result is not very usable. The user needs to much time understand how the slider group works. That's why I test to don't change the slider "size" but just bloc the slider increase. I success to stop the slider. But the linked number continue increseasing.

Here my attempt: http://jsfiddle.net/PXEG2/

I tried that :

function total(){
    var value = parseInt($('#item1').val()) + parseInt($('#item2').val()) + parseInt($('#item3').val()) + parseInt($('#item4').val());
    if(value > 10){
        $('.slider').slider({max: $(this).slider(max)});
    }
}

May be, I don't use the good way ? Thanks for your help.