Изменение позиции ползунка JQuery UI Slider при изменении текста в Input
По сабжу:
Есть калькулятор с ползунками (jQuery UI Slider) на сайте.
При перетаскивании ползунка - текст в связанном input type="text" (числовое значение) меняется.
Как сделать так, чтобы при изменении значения в input ползунок перебегал на это число?
#amount - текстовый input
#slider1 - соответственно слайдер
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }
Очень нужно.
-------------
Ребят, есть тут кто живой? Можете помочь?
-------------
Есть калькулятор с ползунками (jQuery UI Slider) на сайте.
При перетаскивании ползунка - текст в связанном input type="text" (числовое значение) меняется.
Как сделать так, чтобы при изменении значения в input ползунок перебегал на это число?
#amount - текстовый input
#slider1 - соответственно слайдер
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }
$( "#slider1" ).slider({
range: "max",
min: 100000,
max: 10000000,
value: 100000,
step: 100000,
slide: function( event, ui ) {
$( "#amount" ).val( commaInt(ui.value) );
}
});
$( "#amount" ).val( commaInt($( "#slider1" ).slider("value")));
$( "#amount" ).change(function() {
var amountGet = $( "#amount" ).val( commaInt($( "#slider1" ).slider("value") + 100000));
$( "#slider1" ).slider("value", amountGet);
});
function commaInt(val) {
return String(val).split("").reverse().join("")
.replace(/(.{3}B)/g, "$1 ")
.split("").reverse().join("");
}
range: "max",
min: 100000,
max: 10000000,
value: 100000,
step: 100000,
slide: function( event, ui ) {
$( "#amount" ).val( commaInt(ui.value) );
}
});
$( "#amount" ).val( commaInt($( "#slider1" ).slider("value")));
$( "#amount" ).change(function() {
var amountGet = $( "#amount" ).val( commaInt($( "#slider1" ).slider("value") + 100000));
$( "#slider1" ).slider("value", amountGet);
});
function commaInt(val) {
return String(val).split("").reverse().join("")
.replace(/(.{3}B)/g, "$1 ")
.split("").reverse().join("");
}
Очень нужно.
-------------
Ребят, есть тут кто живой? Можете помочь?
-------------