jquery UI：通过滑块更改调整div的宽度

Question

I use jquery UI slider and want onchange to adjust a width of a div:

            $('#slider').slider({
                value: [17],
                change: handleSliderChange
            });

        function handleSliderChange(){
        ...         
        }

here the html

    <div id="slider"></div>
<div id="vardiv" style="width:300px;height:20px;border:3px solid black"> Testing </div>

i want that by adjusting the slider the width of the div #vardiv should be adjusted proportionally.

I guess we have to calculate a bit and use some functions.

THX 4 your support.

Answer 1

the change function would only be called after releasing the mouse, if you want to have realtime effect you can use the slide function like this:

$('#slider').slider({
    value: 17,
    slide: handleSliderChange
});

function handleSliderChange(event, slider){
          $('#vardiv').css('width', slider.value + '%');
          $("#vardiv").text(slider.value + '%');   
}

working example: http://jsfiddle.net/saelfaer/WXfkK/1/

Answer 2

To get this behavior I would write something like this, to get it short.

$("#slider").slider({
     change: function (event, ui) {
          $("#vardiv").css("width", ui.value + "%");
     }
});

This event will executes everytime the slider changes. Inside that event the vardiv element will get a new proportionally width to it´s parent.