Question

I have a couple of those:

        <div class="enunt">text here</div>
        <div class="ans"><input type="text" id="amount1" style="border: 0; color: #f6931f; font-weight: bold;" /></div>
        <div id="slider1" class="slide"></div>

The others have the same structure, but the ids differ by their index number. And I need a function to set up the JQuery sliders. What I did is this:

            function slider(i) {
                $( '#slider' + i ).slider({
                    value:4,
                    min: 1,
                    max: 7,
                    step: 1,
                    slide: function( event, ui, i ) {
                        $( '#amount' + i ).val( ui.value );
                    }
                });
                $( '#amount' + i ).val( $( '#slider' + i ).slider( "value" ) );
            }

And call it like so:

for (var i=1; i<6; i++)
    slider(i);

This does not work at all. Where is my mistake ? It’s my first JQuery app, so please be nice.

Answer 1

The function you assign to slide only takes two parameters, it should be

        function slider(i) {
            $( '#slider' + i ).slider({
                value:4,
                min: 1,
                max: 7,
                step: 1,
                slide: function( event, ui ) {
                    $( '#amount' + i ).val( ui.value );
                }
            });
            $( '#amount' + i ).val( $( '#slider' + i ).slider( "value" ) );
        }

Also make sure you include jquery ui JS and CSS files

http://jsfiddle.net/mowglisanu/Z2aaE/1/