Вывод значения в Бегунок jQuery (Web Builder)


jQuery Бегунок с выводом числа (значения) на ручку ползунка и в input. При изменении положения ползунка значение input(а) меняется и наоборот, изменив значение input(а) бегунок перемещается (синхронизация между бегунком и полем).
Пример с выводом значения в сам Бегунок jQuery
Шаг ползунка: 5
Для работы этого jQuery Бегунка необходимо в HTML-исходнике страницы, во вкладке -- Между тегами <head></head> -- разместить скрипт, и нужно будет изменить (прописать) свои id объектов для эдитбокса и бегунка.
В HTML-исходнике страницы между тегами <head> вставьте скрипт:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
$(function() {
$("
#jQuerySlider").slider({
  
step: 5,
   slide: setAmount,
   change: setAmount
  });
function setAmount(event, ui) {
  var amount = ui ? ui.value : 0;
  $(".ui-slider-handle").text(amount);
  $("
#Editbox").val(amount);
}
  $("input#Editbox").on("change", function() {
  var amount = parseInt(this.value);
  $("
#jQuerySlider").slider("value", amount)
}).change()
});
</script>
В 3-й, 15-й строке скрипта: jQuerySlider - это id jQuery Бегунка.
В 11-й строке скрипта: Editbox - это id поля с выводом значения (input).
Свойства бегунка -- Вкладка -- Общее:

Исходное: 300
Диапазон: min
Минимальное: 100
Максимальное: 1000
CSS стили для jQuery Бегунка:
<style>
.ui-slider .ui-slider-handle {
width: 3em;
height: 1.6em;
top: 50%;
margin-top: -.8em;
text-align: center;
line-height: 1.6em;
outline: none !important;
cursor: pointer !important;
}
</style>
Скрипт который разрешает вводить в input только числа

В HTML-исходнике страницы между тегами <head> вставьте:
<script>
$("
#Editbox").on("keydown keyup input change focus", function() {
  if (this.value.match
(/[^0-9]/g)) {
   this.value = this.value
.replace(/[^0-9]/g, '');
}
  });
</script>
Во 2-й строке скрипта: Editbox - это id поля с выводом значения (input).
Для тех кто не является пользователем программы WYSIWYG Web Builder в скрипте необходимо заменить строку step: 5, на:
orientation: 'horizontal',
animate:
true,
range:
'min',
step:
5,
min:
100,
max:
1000,
value:
300,
Скачать исходник .wbs (версия 12.3.0)
jQuery Бегунок с двумя ползунками (мини/макс).