22.05.2014, 11:46
|
 |
Интересующийся
|
|
Регистрация: 01.08.2013
Сообщений: 22
|
|
|
Помогите подружить слайдер с input
Привет нашел классный слайдер диапазона (во вложении пример). Не знаю как его подружить с инпутами чтобы было как на картинке во вложении.
Чтобы при изменении диапазона слайдера менялись значения инпутов.
помогите пожалуйста.
|
|
22.05.2014, 11:52
|
|
Интересующийся
|
|
Регистрация: 01.08.2013
Сообщений: 22
|
|
Нашел на оф сайте один ответ как связать инпуты с ним. Нужно работать с методом update. Но написать сам не могу. Просьба о помощи с силе.
input 1.on("change", function () {
slider("update", {...})
})
|
|
22.05.2014, 12:47
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
Alex57B,
пример для изменения инпута минимум -- остальное сами или в раздел работа
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Ion.RangeSlider - test</title>
<link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/normalize.min.css" />
<link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.css" />
<link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.skinNice.css" />
</head>
<body>
<div style="position: relative; padding: 50px; width: 600px">
<label for="minCost">от</label><input type="text" id="minCost" value=" менять тут"/>
<label for="maxCost">до</label><input type="text" id="maxCost" />
<input type="text" id="example_1" />
</div>
<!-- All JS -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://ionden.com/a/plugins/ion.rangeSlider/static/js/ion-rangeSlider/ion.rangeSlider.js"></script>
<script>
$(document).ready(function(){
$("#example_1").ionRangeSlider({
min: 456,
max: 556000,
type: 'double',
postfix: " руб",
prettify: false,
hasGrid: true,
onChange: function (obj) {
jQuery("input#minCost").val(obj.fromNumber);
jQuery("input#maxCost").val(obj.toNumber);
}
});
jQuery("input#minCost").on("change", function () {
$("#example_1").ionRangeSlider("update", {from: this.value})
})
});
</script>
</body>
</html>
|
|
22.05.2014, 13:58
|
|
Интересующийся
|
|
Регистрация: 01.08.2013
Сообщений: 22
|
|
|
рони,
Спасибо большое!
|
|
30.10.2014, 11:29
|
|
Аспирант
|
|
Регистрация: 21.02.2014
Сообщений: 37
|
|
|
Использование в форме
Спасибо, Рони, за рабочий пример. Может сможете помочь в такой ситуации, хочу использовать слайдер в форме фильтра. После отправки формы значения инпутов передаются в урле и данные выводятся из текущего диапазона, но после перезагрузки страницы слайдер занимает исходные значение, не смотря на то, что в инпутах значения value сохраняются такие же как при отправке формы. Как сделать, чтобы после перезагрузки страницы с результатами фильтрации в форме, слайдер принимал значения fromNumber и toNumber уже на основе сохраненных значений инпутов?
Другими словами, в этом примере слайдер передает значения в инпут, как сделать чтобы после перезагрузки страницы он еще и получал эти значения из инпута?
Вот как работает это сейчас http://historydev.96.lt/
Последний раз редактировалось kingstakh, 30.10.2014 в 11:37.
|
|
30.10.2014, 11:55
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
kingstakh,
$(document).ready(function(){
$("#example_1").ionRangeSlider({
min: 1871,
max: 1991,
type: 'double',
prettify: false,
hasGrid: true,
onChange: function (obj) {
jQuery("input#min-date").val(obj.fromNumber);
jQuery("input#max-date").val(obj.toNumber);
}
});
jQuery("input#min-date").on("change", function () {
$("#example_1").ionRangeSlider("update", {from: this.value})
})
jQuery("input#min-date").val() && jQuery("input#min-date").change()
jQuery("input#max-date").on("change", function () {
$("#example_1").ionRangeSlider("update", {to: this.value})
})
jQuery("input#max-date").val() && jQuery("input#max-date").change()
});
|
|
30.10.2014, 13:51
|
|
Аспирант
|
|
Регистрация: 21.02.2014
Сообщений: 37
|
|
Спасибо огромное, Профессор! Теперь все как нужно  |
|
30.10.2014, 19:14
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
|
kingstakh,
если у вас сервер формирует значения инпутов то проще инициализировать плагин добавив
from: <значение> или null,
to: <значение> или null,
тогда строки 17 и 22 будут лишние
|
|
20.05.2015, 01:25
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
|
nSide,
нет кода нет совета
делайте макет
|
|
|
|
