Помогите подружить слайдер с input
Вложений: 2
Привет нашел классный слайдер диапазона (во вложении пример). Не знаю как его подружить с инпутами чтобы было как на картинке во вложении.
Чтобы при изменении диапазона слайдера менялись значения инпутов. помогите пожалуйста. |
Нашел на оф сайте один ответ как связать инпуты с ним. Нужно работать с методом update. Но написать сам не могу. Просьба о помощи с силе.
input 1.on("change", function () {
slider("update", {...})
})
|
Alex57B,
зачем плодить темы документацию прочитать есть даже на ррусском https://github.com/IonDen/ion.rangeS...r/readme.ru.md и сделать как в прошлом примере http://javascript.ru/forum/dom-windo...lajjderom.html или в раздел работа.  |
Alex57B,
:cray: :cray: :cray: пример для изменения инпута минимум -- остальное сами или в раздел работа
<!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>
|
рони,
Спасибо большое! |
Использование в форме
Спасибо, Рони, за рабочий пример. Может сможете помочь в такой ситуации, хочу использовать слайдер в форме фильтра. После отправки формы значения инпутов передаются в урле и данные выводятся из текущего диапазона, но после перезагрузки страницы слайдер занимает исходные значение, не смотря на то, что в инпутах значения value сохраняются такие же как при отправке формы. Как сделать, чтобы после перезагрузки страницы с результатами фильтрации в форме, слайдер принимал значения fromNumber и toNumber уже на основе сохраненных значений инпутов?
Другими словами, в этом примере слайдер передает значения в инпут, как сделать чтобы после перезагрузки страницы он еще и получал эти значения из инпута? Вот как работает это сейчас http://historydev.96.lt/ |
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()
});
|
Спасибо огромное, Профессор! Теперь все как нужно :dance:
|
kingstakh,
если у вас сервер формирует значения инпутов то проще инициализировать плагин добавив from: <значение> или null, to: <значение> или null, тогда строки 17 и 22 будут лишние |
nSide,
нет кода нет совета делайте макет |
| Часовой пояс GMT +3, время: 15:13. |