input <-> jQuery Slider

@[progeR] · Регистрация: 20.08.2011

Студворк — интернет-сервис помощи студентам

Добрый вечер.
Вопрос наверное не раз поднимался, поэтому извините.
Как сделать связь: input -> slider? Ввели цифру в инпут, слайдер переместился куда нужно. Обратную связь нашел как делать.
И попутно: как запретить пользователю вводить все кроме цифр?

Спасибо.

@jaja · 04.05.2013, 22:45

Сообщение от [progeR

как запретить пользователю вводить все кроме цифр?

onkeyup="скрипт который чистит введенные данные"

@[progeR] · 04.05.2013, 22:49 **[ТС]**

Сообщение от jaja

onkeyup="скрипт который чистит введенные данные"

Ну это я догадался, что нужно использовать событийную модель)) А сам скрипт как сделать? Там, наверное, какой-нибудь regExp нужно использовать?

@jaja · 04.05.2013, 22:56

Сообщение от [progeR]

Ну это я догадался, что нужно использовать событийную модель)) А сам скрипт как сделать? Там, наверное, какой-нибудь regExp нужно использовать?

Я думаю можно просто разобрать строку посимвольно. Из regExp думаю хватит test

@[progeR] · 05.05.2013, 11:06 **[ТС]**

Ну а как сделать связь input -> slider?

@jaja · 05.05.2013, 14:29

Сообщение от [progeR]

Ну а как сделать связь input -> slider?

HTML5
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
<html>
<head>
  <title>slider</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <style>#slider { margin: 10px; }  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<div id="slider"></div>
<script>
  $( "#slider" ).slider();
</script>
 
<input type="text" value="" id="t1">
<input type="button" value="OK" id="b1" onclick="buttonClicked();" >
 
<script type="text/javascript">
function buttonClicked(){
  var t1 = document.getElementById('t1');
  $( "#slider" ).slider( "value", t1.value );
}
</script>
</body>
</html>

@[progeR] · 05.05.2013, 17:36 **[ТС]**

Спасибо, но получается бредятина. У меня диапазон устновлен (50, 10000). Когда ввожу число в инпут, ползунок (нужный мне) передвигается, но совсем не на то расстояние, которое нужно. Например, чтобы он передвинулся на середину, надо ввести 50000, а не 5000!
Если же вместо t1.value подставить конкретное число, то ползун двигается куда нужно...

@jaja · 05.05.2013, 20:28

Сообщение от [progeR]

Спасибо, но получается бредятина. У меня диапазон устновлен (50, 10000). Когда ввожу число в инпут, ползунок (нужный мне) передвигается, но совсем не на то расстояние, которое нужно. Например, чтобы он передвинулся на середину, надо ввести 50000, а не 5000!
Если же вместо t1.value подставить конкретное число, то ползун двигается куда нужно...

Напишите код, связанный со слайдером сюда.

@[progeR] · 05.05.2013, 20:46 **[ТС]**

JavaScript
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
$(function() {
    $( "#slider-batt-capacity" ).slider({
        range: true,
        min: 0,
        max: 10000,
        step: 50,
        values: [ 50, 10000 ],
        stop: function(event, ui)
               {
                    jQuery("#minCapacity").val(jQuery("#slider-batt-capacity").slider("values",0));
                    jQuery("#maxCapacity").val(jQuery("#slider-batt-capacity").slider("values",1));
               },
        slide: function(event, ui)
               {
                    jQuery("#minCapacity").val(jQuery("#slider-batt-capacity").slider("values",0));
                    jQuery("#maxCapacity").val(jQuery("#slider-batt-capacity").slider("values",1));
               }
    });
});
 
function valueChanged(sliderId, sliderHandle, inputId)
{
    var input = document.getElementById(inputId);
    $("#"+ sliderId).slider("values", parseInt(sliderHandle), input.value);
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<table width="100%">
                                    <tr valign="baseline">
                                        <td><label class="slider-label">Ёмкость:</label></td>
                                        <td  style="padding-bottom:15px;" align="right">
                                            <label for="minCapacity" class="range-label">от</label>
                                            <input type="text" onkeypress="valueChanged('slider-batt-capacity', 0, 'minCapacity');" class="range-input" name="minCapacity" id="minCapacity" value="50"/>
                                            <label for="maxCapacity" class="range-label" style="margin-left:5px;">до</label>
                                            <input type="text" onkeypress="valueChanged('slider-batt-capacity', 1, 'maxCapacity');" class="range-input" name="maxCapacity" id="maxCapacity" value="10000"/>
                                            <label class="range-label">mAh</label>       
                                        </td>
                                    </tr>
                                    <tr >
                                        <td colspan="2"><div id="slider-batt-capacity"></div></td>
                                    </tr>
                                    <tr>
                                        <td align="left"><label class="range-label">50</label></td>
                                        <td align="right"><label class="range-label">10000</label></td>
                                    </tr>
                                </table>

@jaja · 05.05.2013, 22:26

HTML5
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
51
52
53
54
55
56
57
58
59
60
61
<html>
<head>
<title>slider</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <style>#slider { margin: 10px; }  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
    $( "#slider-batt-capacity" ).slider({
        range: true,
        min: 50,
        max: 10000,
        step: 50,
        values: [ 50, 10000 ],
        stop: function(event, ui)
               {
                    jQuery("#minCapacity").val(jQuery("#slider-batt-capacity").slider("values",0));
                    jQuery("#maxCapacity").val(jQuery("#slider-batt-capacity").slider("values",1));
               },
        slide: function(event, ui)
               {
                    jQuery("#minCapacity").val(jQuery("#slider-batt-capacity").slider("values",0));
                    jQuery("#maxCapacity").val(jQuery("#slider-batt-capacity").slider("values",1));
               }
    });
});
 
function valueChanged(sliderId, inputId)
{
    var input = document.getElementById(inputId);
    if(inputId=="t1")$("#"+ sliderId).slider("values", 0, input.value);
    else if(inputId=="t2")$("#"+ sliderId).slider("values", 1, input.value);
}
</script>
</head>
<body onload="valueChanged;">
<table width="100%">
    <tr valign="baseline">
        <td><label class="slider-label">Ёмкость:</label></td>
        <td  style="padding-bottom:15px;" align="right">
            <label for="minCapacity" class="range-label">от</label>
            <input type="text" onkeypress="valueChanged('slider-batt-capacity', 0, 'minCapacity');" class="range-input" name="minCapacity" id="minCapacity" value="50"/>
            <label for="maxCapacity" class="range-label" style="margin-left:5px;">до</label>
            <input type="text" onkeypress="valueChanged('slider-batt-capacity', 1, 'maxCapacity');" class="range-input" name="maxCapacity" id="maxCapacity" value="10000"/>
            <label class="range-label">mAh</label>       
        </td>
    </tr>
    <tr >
        <td colspan="2"><div id="slider-batt-capacity"></div></td>
    </tr>
    <tr>
        <td align="left"><label class="range-label">50</label></td>
        <td align="right"><label class="range-label">10000</label></td>
    </tr>
</table>
For handle 0: <input type="text" value="" id="t1"><input type="button" value="OK" id="s1" onclick="valueChanged('slider-batt-capacity', 't1');" >
<br>
For handle 1: <input type="text" value="" id="t2"><input type="button" value="OK" id="s2" onclick="valueChanged('slider-batt-capacity', 't2');" >
</body>
</html>

ну вот так работает нормально.

@IffeR · 08.08.2014, 18:13

Добро, ребят!

У меня схожая трабла.

Есть вариант решения, когда передвижение ползунка заставляет менять значения input.

Я использую след.код:

JavaScript
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
                    $( "#slider1" ).slider({
                            range: "max",
                            min: 100000,
                            max: 10000000,
                            value: 200000,
                            step: 100000,
                            slide: function( event, ui ) {
                                $( "#amount" ).val( commaInt(ui.value) );
                            }
                        });
                    
                        function changeble() {
                            var amountGet = $('#amount').val();
                            $( "#slider1" ).slider("value", amountGet);
                        }
                            
                        $( "#amount" ).change(function() {
                            var amountGet = $(this).val();
                            $( "#slider1" ).slider("value", amountGet); 
                        });
        
 
                    function setInputsFromSlider() {
                        $( "#amount" ).val( commaInt($( "#slider1" ).slider("value")));
                    }
                    
                    setInputsFromSlider();
 
                    /* RAZRYADY */
                
                    function commaInt(val) {
                        return String(val).split("").reverse().join("")
                                        .replace(/(.{3}\B)/g, "$1 ")
                                        .split("").reverse().join("");
                    }

С этим ясно.

По сабжу:

Есть калькулятор с ползунками (jQuery UI Slider) на сайте.
При перетаскивании ползунка - текст в связанном input type="text" (числовое значение) меняется.

Как сделать так, чтобы при изменении значения в input ползунок перебегал на это число?

#amount - текстовый input
#slider1 - соответственно слайдер
commaInt - функция разрядов числа (пример: 1000000 --> 1 000 000)

Хоть убейте, при изменении значения input - ползунок стоит на месте.
Это можно реализовать как-то без события onclick в теге?

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@[progeR] 30 / 8 / 2 Регистрация: 20.08.2011 Сообщений: 615

	input <-> jQuery Slider 04.05.2013, 22:34. Показов 2396. Ответов 10 Метки нет (Все метки) Добрый вечер. Вопрос наверное не раз поднимался, поэтому извините. Как сделать связь: input -> slider? Ввели цифру в инпут, слайдер переместился куда нужно. Обратную связь нашел как делать. И попутно: как запретить пользователю вводить все кроме цифр? Спасибо. 0

@[progeR] 30 / 8 / 2 Регистрация: 20.08.2011 Сообщений: 615
	05.05.2013, 11:06 [ТС]
	Ну а как сделать связь input -> slider? 0

@[progeR] 30 / 8 / 2 Регистрация: 20.08.2011 Сообщений: 615
	05.05.2013, 17:36 [ТС]
	Спасибо, но получается бредятина. У меня диапазон устновлен (50, 10000). Когда ввожу число в инпут, ползунок (нужный мне) передвигается, но совсем не на то расстояние, которое нужно. Например, чтобы он передвинулся на середину, надо ввести 50000, а не 5000! Если же вместо t1.value подставить конкретное число, то ползун двигается куда нужно... 0