Бегунок jQuery WYSIWYG Web Builder


jQuery Бегунок с двухсторонней связью, синхронизация между бегунком и инпутом
(Editbox). При изменении положения бегунка данные в инпуте меняются и наоборот
при изменении данных в инпуте бегунок перемещается.
Демо-пример: jQuery бегунок с двухсторонней связью
Шаг ползунка: 10
В HTML-исходнике страницы между тегами <head> вставьте скрипт:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
$(function() {
    var input = $("
#Editbox"),
        begunok = $("
#jQuerySlider");
    begunok.slider({
       
step: 10,
       
change: function(begunok, pi) {
            input.val(pi.value)
        },
        slide: function(begunok, pi) {
            input.val(pi.value)
        }
    });
    input
.val(100).focusout(function() {
        begunok.slider("value", this.value)
    }).focusout()
});
</script>
В 3-й строке скрипта: Editbox - это id поля с выводом значения (input).
В 4-й строке скрипта: jQuerySlider - это id ползунка (бегунка).
В 6-й строке скрипта: step: 10, -- число 10 отвечает за шаг ползунка.
В 14-й строке: .val(100) -- число 100 отвечает за исходное положение ползунка.
Для тех кто не является пользователем программы WYSIWYG Web Builder в скрипте добавьте дополнительные строки после step: 10,
orientation: 'horizontal',
animate:
true,
range:
'min',
min:
0,
max:
1000,
value:
100,
Свойства бегунка -- Вкладка -- Общее:

Исходное: 100
Диапазон: min
Минимальное: 0
Максимальное: 1000
В HTML-исходнике страницы между тегами <head> вставьте:
<style>
.ui-slider .ui-slider-handle {
outline: none !important;
cursor: pointer !important;
}
</style>
Код убирает синюю обводку, и у ползунка появляется «рука» вместо стрелки.
Чтобы «рука» появилась для линии, необходимо в HTML-исходнике бегунка -- Особый стиль -- прописать: cursor: pointer !important;
Пример HTML-кода для ui ползунка и input:
<div id="jQuerySlider"></div>
<
input type="text" id="Editbox" name="Сумма" value="0">
jQuery Бегунок с двумя ползунками (мини/макс)
Скачать исходник .wbs для WYSIWYG Web Builder 12