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 в теге?

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита табличной части. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

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

	input <-> jQuery Slider 04.05.2013, 22:34. Показов 2425. Ответов 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