Question

i need to display 10 slider-range-min: the last one (the 10th) is the average of the 9 other sliders.

For that i’ve repeated the same code 9 time (is it optimum?) by changing id each time

 $( "#slider-range-min9" ).slider({
                range: "min",
                value: 10,
                min: 1,
                max: 20,
                slide: function( event, ui ) {
                    $( "#amount9" ).text( "$" + ui.value );
                }
            });

$( "#amount9" ).text( "$" + $( "#slider-range-min9" ).slider( "value" ) );

And for the average i’ve repeated the same code also and modified the value:

value: (($( "#slider-range-min1" ).slider( "value" )+$( "#slider-range-min3" ).slider( "value" )+$( "#slider-range-min2" ).slider( "value" )+$( "#slider-range-min4" ).slider( "value" )+$( "#slider-range-min5" ).slider( "value" )+$( "#slider-range-min6" ).slider( "value" )+$( "#slider-range-min7" ).slider( "value" )+$( "#slider-range-min8" ).slider( "value" )+$( "#slider-range-min9" ).slider( "value" ))/9),

The problem is that the value of this slider (the 10th) does’nt change in live, and i’ve noticed that my page is a little bit heavy.

Is there any other mean to make the same thing with optimised code?

I’ll be very thankful

Answer 1

http://jsfiddle.net/YPWY8/

$(".slider").slider({
    range: "min",
    value: 10,
    min: 1,
    max: 20,
    slide: function( event, ui ) {
        if ($(this).hasClass("avg")){
            event.preventDefault();
            return false;
        }

        var sliders = $(".slider:not(.avg)");
        var val = 0, len = sliders.length;
        sliders.each(function(i, ele){
            val += $(ele).slider("option", "value");
        });

        var newVal = Math.round(val/len);

        $(".slider.avg").slider("option", "value", newVal);
    }
});

HTML

<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
<div class="slider avg"></div>