Помогите подружить слайдер с 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, время: 12:41. |