jquery multiple slider insert values into textbox

Question

I have multiple sliders that share a common maximum number, I am trying to capture those numbers now into text inputs, but I don't know what I am doing. The JavaScript will print the numbers into a span no issue as long as the class is "spent". But doesn't work when I've tried it with a text input. I've also made a jsfiddle for this http://jsfiddle.net/zkyks/

What would the proper way be to bind these values to inputs? I have done this individually by calling the id but I don't know how to to implement that here.

Thanks in advance.

JS

$(

function () {
    var
    maxValueSlider = 100,
        maxValueTotal = 100,
        $sliders = $("#eq .work_slider"),
        valueSliders = [],
        $displaySpentTotal = $('#spent');
    $displaySpendable = $('#spendable');

    function arraySum(arr) {
        var sum = 0,
            i;
        for (i in arr) sum += arr[i];
        return sum;
    }

    $sliders.each(

    function (i, slider) {
        var
        $slider = $(slider),
            $spent = $slider.next('.spent');
        valueSliders[i] = 0;
        $slider.slider({
            range: 'min',
            value: 0,
            min: 0,
            max: maxValueSlider,
            step: 5,
            animate: true,
            orientation: "horizontal",
            slide: function (event, ui) {
                var
                sumRemainder = arraySum(valueSliders) - valueSliders[i],
                    adjustedValue = Math.min(maxValueTotal - sumRemainder, ui.value);
                valueSliders[i] = adjustedValue;
                // display the current total
                $displaySpentTotal.text(sumRemainder + adjustedValue);
                $displaySpendable.text(maxValueTotal - sumRemainder - adjustedValue);
                // display the current value
                $spent.text(adjustedValue);
                // set slider to adjusted value
                $slider.slider('value', adjustedValue);

                // stop sliding (return false) if value actually required adjustment
                return adjustedValue == ui.value;

            }
        });
    });
});

HTML

<div class="panel">
    <label class="panel_label">Sliders %:</label>
    <div id="eq">
        1:<div id="work_slider1" name="work_slider1" class="work_slider"></div>
             <input type="text" name="work_spent1" id="work_spent1" />
        2:<div id="work_slider2" name="work_slider2" class="work_slider"></div>
             <input type="text" name="work_spent2" id="work_spent2" />
        3:<div id="work_slider3" name="work_slider3" class="work_slider"></div>
             <input type="text" name="work_spent3" id="work_spent3" />
        4:<div id="work_slider4" name="work_slider4" class="work_slider"></div>
              <input type="text" name="work_spent4" id="work_spent4" />
    </div>
    <div id="spendable">100</div>
</div>

Answer 1

To make minimal changes in your code, you just need to add one line just before return statement in your slide: function (event, ui) {...}:

$(this).next().val(adjustedValue); //set the value of input next to slider

And remove the <br/> between <div> and <input>.

Or keep one <br/> and use:

$(this).next().next().val(adjustedValue);

Working example: http://jsfiddle.net/k8UkE/

Answer 2

Did some code edititing for the first slider. See if it helps

Replaced following // $displaySpendable = $('#work_spent1')

//$displaySpentTotal.val(sumRemainder + adjustedValue); $displaySpendable.val(maxValueTotal - sumRemainder - adjustedValue);

$(function () {
var
maxValueSlider = 100,
    maxValueTotal = 100,
    $sliders = $("#eq .work_slider"),
    valueSliders = [],
    $displaySpentTotal = $('#spent');

$displaySpendable = $('#work_spent1');

function arraySum(arr) {
    var sum = 0,
        i;
    for (i in arr) sum += arr[i];
    return sum;
}

$sliders.each(

function (i, slider) {
    var
    $slider = $(slider),
        $spent = $slider.next('.spent');
    valueSliders[i] = 0;
    $slider.slider({
        range: 'min',
        value: 0,
        min: 0,
        max: maxValueSlider,
        step: 5,
        animate: true,
        orientation: "horizontal",
        slide: function (event, ui) {
            var
            sumRemainder = arraySum(valueSliders) - valueSliders[i],
                adjustedValue = Math.min(maxValueTotal - sumRemainder, ui.value);
            valueSliders[i] = adjustedValue;
            // display the current total
            **$displaySpentTotal.val(sumRemainder + adjustedValue);
            $displaySpendable.val(maxValueTotal - sumRemainder - adjustedValue);**
            // display the current value
            $spent.text(adjustedValue);
            // set slider to adjusted value
            $slider.slider('value', adjustedValue);

            // stop sliding (return false) if value actually required adjustment
            return adjustedValue == ui.value;

        }
    });
});

});