JQuery UI: настроить ширину div с помощью изменения ползунка

Question

Я использую jquery Пользовательский интерфейс и хочу, чтобы onchange изменил ширину div:

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

        function handleSliderChange(){
        ...         
        }

здесь html

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

я хочу, чтобырегулируя ползунок, ширина div #vardiv должна корректироваться пропорционально.

Я думаю, нам нужно немного вычислить и использовать некоторые функции.

THX 4 ваша поддержка.

Answer 1

функция изменения будет вызываться только после отпускания мыши, если вы хотите иметь эффект в реальном времени, вы можете использовать функцию слайда как это:

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

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

рабочий пример: http://jsfiddle.net/saelfaer/WXfkK/1/

Answer 2

Чтобы получить такое поведение, я бы написал что-то вроде этого, чтобы сделать его коротким.

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

Это событие будет выполняться каждый раз, когда меняется ползунок. Внутри этого события элемент vardiv получит новую пропорциональную ширину для своего родителя.