Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Нужно связать input и ползунок jQuery Slider / jQuery ui (https://javascript.ru/forum/jquery/49389-nuzhno-svyazat-input-i-polzunok-jquery-slider-jquery-ui.html)

IffeR 11.08.2014 12:55

Нужно связать input и ползунок jQuery Slider / jQuery ui
 
Добрый день. Сразу по сабжу:

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

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

$( "#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 - ползунок стоит на месте.

Можете помочь?

IffeR 11.08.2014 12:59

Выяснил, код работает.

Во всём виноваты получается разряды. Как сделать чтобы функция commaint не мешала вычислениям?

рони 11.08.2014 17:01

IffeR,
добавить в инициализацию слайдера параметр change, на фокус инпута поставить функцию для стирания пробелов в значении, после строки 18 добавить обработку введённого числа на минимум и максимум и кратности шагу.

lolodan 16.08.2014 17:41

Нужно связать input и ползунок jQuery Slider / jQuery ui
 
jQuery – это звезда среди остальных библиотек. Её достоинства – это: легкость, кросс-браузерность и простота. Задача, которая потребовала бы 10 строк кода на javascript, решается одной строкой на jQuery. Например, Вы хотите раскрасить табличку с id=”mytable”, чтобы каждый ряд имел свой цвет.

РљРѕРґ:

рони 16.08.2014 18:01

lolodan,
:blink:


Часовой пояс GMT +3, время: 22:16.