Два ползунка для jQuery Бегунка Web Builder


jQuery Бегунок с двумя ползунками для выбора минимального и максимального значения. Изменяя положение ползунков данные в input(ах) меняются и наоборот при изменении данных в input(ах) ползунки перемещаются.
Пример jQuery Бегунка с двумя ползунками, (с двухсторонней связью Editbox).
Шаг ползунка: 5
От
До
В 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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<script>
$(function(){

  $('
#jQuerySlider').slider({
   
step:5,
    min: 100,
    max: 1000,
    values: [300,500],
    range: true,

   
change: function(event, ui) {
    $('
#Editbox1').val(ui.values[0]);
    $('
#Editbox2').val(ui.values[1]);
  },
   slide: function(event, ui){
    $('
#Editbox1').val(ui.values[0]);
    $('
#Editbox2').val(ui.values[1]);
  }
});

$('
#Editbox1').val($('#jQuerySlider').slider("values",0));
$('
#Editbox2').val($('#jQuerySlider').slider("values",1));

$('
#Editbox1').change(function(){
  var value1=$('
#Editbox1').val();
  var value2=$('
#Editbox2').val();

 
if (value1 < 100) { value1 = 100; $('#Editbox1').val(100)}

 
if(parseInt(value1) > parseInt(value2)){
value1 = value2;
$('
#Editbox1').val(value1);
  }
  $('
#jQuerySlider').slider("values",0,value1);
});

$('
#Editbox2').change(function(){
   var value1=$('
#Editbox1').val();
   var value2=$('
#Editbox2').val();

 
if (value2 > 1000) { value2 = 1000; $('#Editbox2').val(1000)}

 
if(parseInt(value1) > parseInt(value2)){
value2 = value1;
$('
#Editbox2').val(value2);
  }
  $('
#jQuerySlider').slider("values",1,value2);
   });
});
</script>
Editbox1 - это id первого поля «От» (input).
Editbox2 - это id второго поля «До» (input).
jQuerySlider - это id ползунка (бегунка).
В 5-й строке скрипта: step: 5, -- число 5 отвечает за шаг ползунка.
В 8-й строке: values: [ 300, 500 ], -- это исходное положение ползунков.
В 6-й, 28-й строке пропишите минимальное значение для ползунка (100).
В 7-й, 41-й строке пропишите максимальное значение для ползунка (1000).
Свойства бегунка -- Вкладка -- Общее:

Исходное: 300
Диапазон: min
Минимальное: 100
Максимальное: 1000
В HTML-исходнике страницы между тегами <head> вставьте:
<style>
.ui-slider .ui-slider-handle {
outline: none !important;
cursor: pointer !important;
}
</style>
Код убирает синюю обводку, и у ползунка появляется «рука» вместо стрелки.
Чтобы «рука» появилась для линии, необходимо в HTML-исходнике бегунка -- Особый стиль -- прописать: cursor: pointer !important;
Данный скрипт в программе WYSIWYG Web Builder необходимо подключать в исходнике странице -- Между тегами <head><head> -- при внешнем подключении может не работать, но в параметрах программы -- HTML -- можно установить галку напротив -- Генерировать внешний JS файл для скриптов страницы и сжать.
Скачать исходник .wbs (версия 12.3.0)
jQuery Бегунок с одним ползунком и значение в input