JQuery Slider - функция остановки - что делать, если пользователь не останавливается?

Question

У меня есть этот код, который использует JQuery UI для создания слайдера. Он вызывает функцию, когда ползунок остановлен (когда вы перестаете перемещать слайдер) и создает поле скрытой формы со значением, содержащимся в слайдере (чтобы он мог быть POST'ed после отправки формы.)

Это отлично работает, за исключением одной незначительной ошибки:

Если пользователь не перемещает ползунок, stop: никогда не запускается, и поэтому скрытое поле формы никогда не создается.

Каков наилучший способ исправить это?

$(function() { 
    $("#slider8").slider({ 
    orientation: "horizontal", 
    range: "min", 
    min: 0, 
    max: 100, 
    value: 50, 
    stop: function(event, ui) { 
     var $s1 = $('<input/>', {type: 'hidden',id:'slider8',name:'slider8', value: ui.value}); 
     $s1.appendTo('.form-horizontal'); 
    } 
    }); 
});   

Answer 1

Edit:

Мое первое предложение было прикрепить ползунок JQuery UI к типу входного диапазона, но JQuery UI не поддерживает, что - это только привязывается к дивы, а не элементы ввода. Виноват.

Вот полный пример jsFiddle того, чего вы хотите достичь. Вам нужно создать свой скрытый элемент в создании события, и обновлять его в случае изменения, например, так:

HTML:

<div id="slider8ui"></div> 

JQuery:

$(function() { 
    $("#slider8ui").slider({ 
    orientation: "horizontal", 
    range: "min", 
    min: 0, 
    max: 100, 
    value: 50, 
    create: function(event, ui) { 
     $('<input/>', {type: 'text',id:'slider8',name:'slider8', value: 50}).appendTo('#slider8ui'); 
    }, 
    change: function(event, ui) { 
     $("#slider8").val(ui.value); 
    } 
    }); 
}); 

Вот полный jsFiddle:

http://jsfiddle.net/TdpX9/