Горизонтальный jQuery Бегунок и шкала с числами


Цифровая горизонтальная шкала под jQuery Бегунком и с выводом значения в input.
Кликнув по шкале (числу, отсечке) ползунок переместится на это значение (позицию).
jQuery Ползунок и input тоже связаны между собой.
Пример jQuery Бегунка и цифровой горизонтальной шкалы
В HTML-исходнике страницы между тегами <head> вставьте скрипт:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script>
$( "
#jQuerySlider" ).slider({
 
min: 1,
  max: 10,
  step: 1

})
.each(function() {
var opt = $(this).data().uiSlider.options;
var vals = opt.max - opt.min;
for (var i = 0; i <= vals; i++) {
 
var el = $('<label>'+' ∣ '+(i+1)+'</label>').css('left',(i/vals*100)+'%'); 
$( "
#jQuerySlider" ).append(el);
  }
});

$(function() {
var pole = $("
#Editbox"),
  slid = $("
#jQuerySlider");
  slid.slider({
   
change: function(slid, p) {
      pole.val(p.value)
        },
      slide: function(slid, p) {
      pole.val(p.value)
        }
});
pole.val(3).focusout(function() {
slid.slider("value", this.value)
}).focusout()
});
</script>
jQuerySlider - это id ползунка.
Editbox - это id поля с выводом значения (input).
Для тех кто не является пользователем программы WYSIWYG Web Builder в скрипте добавьте строки после step: 1, (в step после единицы  добавьте запятую):
orientation: 'horizontal',
animate:
true,
range:
'min',
value:
3
Свойства бегунка -- Вкладка -- Общее:

Исходное: 3
Диапазон: min
Минимальное: 1
Максимальное: 10
CSS стили для шкалы (label):
<style>
#jQuerySlider label {
position: absolute;
color: #333333;
width: 10px;
margin-left: -5px;
font-size: 14px;
text-align: center;
margin-top: 15px;
cursor: pointer !important;
}
</style>
Ширина бегунка влияет на стиль label, поэтому подправьте стили под себя.
Скачать исходник .wbs (версия 12.3.0)