Multiple Jquery UI Slider non linear value

Question

I have been searching and trying to find a solution for this but unfortunately can't get my way round it. I have multiple jQuery UI sliders which all have their values on sliding from an array. At the end I am trying to get the value of the slider and add it up with the other sliders. Here is the code for only two sliders:

$(function () {
    var labelArr = new Array(0, 200, 400, 600);
    $("#slider").slider({
        values: 0,
        min: 0,
        max: labelArr.length - 1,
        slide: function (event, ui) {
            mbdata = labelArr[ui.value] + $("#slider_2").slider("value") + $("#slider_3").slider("value") + $("#slider_4").slider("value") + $("#slider_5").slider("value") + $("#slider_6").slider("value");
            g1.refresh(mbdata);
        }
    });
});

$(function () {
    var labelArr = new Array(0, 300, 900, 1200);
    $("#slider_2").slider({
        value: 0,
        min: 0,
        max: labelArr.length - 1,
        slide: function (event, ui) {
            mbdata = labelArr[ui.value] + $("#slider_3").slider("value") + $("#slider").slider("value") + $("#slider_4").slider("value") + $("#slider_5").slider("value") + $("#slider_6").slider("value");
            g1.refresh(mbdata);
        }
    });
});

The first slider works good, but unfortunately when I slide the second one the values are not showing the array ones but simply 1 , 2 , 3

Can someone please try giving me some help

Many thanks

Answer 1

I changed the whole script, but hopefully its doing now what you want it to do - just extend the sliderRangesValues Array (and add a new div with the right ID) to add more slider and values. Its now a much more flexible script:

http://jsfiddle.net/fKUAe/1/

Dummy HTML:

<div id="slider0" class="slider"></div>
<div id="slider1" class="slider"></div>
<div id="slider2" class="slider"></div>
<input type="text" id="slidervalues" value="0" />

jQuery:

var sliderRangeValues = [
    [0, 100, 200, 300],
    [0, 300, 600, 900],
    [0, 1, 2, 3, 4, 5]
];

function getAllSliderValues(sliderCount) {
    var sliderValues = 0;
    for (var i = 0; i < sliderCount; i++) {
        var uiValue = $('#slider' + i).slider('value');
        sliderValues += sliderRangeValues[i][uiValue];
    }
    $('#slidervalues').val(sliderValues);
}

function initSlider(i, sliderCount) {
    $('#slider' + i).slider({
        values: 0,
        min: 0,
        max: sliderRangeValues[i].length - 1,
        slide: function (event, ui) {
            $('#slider' + i).slider('value', ui.value);
            getAllSliderValues(sliderCount);
        }
    });
}

$(function () {
    var sliderCount = $('.slider').length;
    for (var i = 0; i < sliderCount; i++) {
        initSlider(i, sliderCount);
    }
});