Помогите подружить слайдер с 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,
нет кода нет совета делайте макет |
уже не надо. распарсил ответ слайдера
спасибо ))) |
Цитата:
Кстати, почему пишут "диапазон цен", если смысл в точности обратный - сколько вы денег хотите потратить. Надо писать "Ваш бюджет". |
Во-первых, огромное спасибо всем в этой теме за неоценимую помощь. ))) Без вас я бы еще долго мучился.
Во-вторых, слайдер обновился и теперь "Для того чтобы использовать публичные методы, вначале нужно записать значение слайдера в переменную". Поэтому, с вашей помощью, я использовал следующую конструкцию:
<input type="text" name="pricefrom" id="pricefrom" value="">
<input type="text" name="priceto" id="priceto" value="">
<input type="text" id="range" name="range" value="" />
<script type="text/javascript">
(function($) {
$(function(){
var $range = $("#range");
var track = function () {
var value = this.value.split(";");
jQuery("input#pricefrom").val(value[0]);
jQuery("input#priceto").val(value[1]);
};
$range.ionRangeSlider({
hide_min_max: true,
min: 100,
max: 100000,
from: 500,
to: 70000,
type: 'double',
step: 100,
postfix: " ₽",
grid: true
});
$range.on("change", track).change();
var slider = $("#range").data("ionRangeSlider");
jQuery("input#pricefrom").on("change", function () {
slider.update({from: this.value})
})
jQuery("input#pricefrom").val() && jQuery("input#pricefrom").change()
jQuery("input#priceto").on("change", function () {
slider.update({to: this.value})
})
jQuery("input#priceto").val() && jQuery("input#priceto").change()
});
})(jQuery);
</script>
UPD: Обновил листинг в соответствии с рекомендациями. |
nSide,
на всякий случай вместо строк 11 и 12
var value = this.value.split(";");
и строку 27 дополнить $range.on("change", track).change(); |
Цитата:
UPD: И действительно, так лучше )) Спасибо! UPD2: Обновил листинг в соответствии с рекомендациями. |
Здравствуйте, извините что не по теме, но очень нужна помощь
Есть скрипт <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> </head> <body> <div id="result"></div> <button onClick="setNumber(this)" value="20">20</button> <button onClick="setNumber(this)" value="30">30</button> <button onClick="setNumber(this)" value="40">40</button> <script> var result = document.getElementById('result') var num = 0; function setNumber(e){ result.innerHTML = num += parseInt(e.value); } </script> <style> #result{ border:1px solid green; width:100px; height:50px; margin-bottom:10px } </style> </body> </html> Как его разъединить. К примеру чтоб кнопка было в низу слева сайта а число отображалось в правом верхнем углу. Буду очень благодарна. Готова заплататить |
Вот смотрите prntscr.com/cw5pmd Надо чтоб кнопки допустим были здесь а цифры в другом месте
Код я втавляю в целиком в редакторе |
togtfo
|
| Часовой пояс GMT +3, время: 07:19. |