Можно ли как-то связать значения инпутов from и to range slider при их редактировании (ввод значений в поля) с функцией getValues(values), вычисляющей разницу to - from?
Пример на codepen
На данный момент происходит вычисление только при перетаскивании ползунков.
Меняю ползунки слайдера - вычисляется total, ввожу в поля input свои значения - не вычисляется total )
'use strict';
$(document).ready(function() {
console.log('Hello, world!');
// ---------------------------------- Range slider jq ui
$('.filter__slider-element').each(function() {
var $this = $(this),
container = $this.closest('.filter__slider'),
min = parseInt($this.data('min')),
max = parseInt($this.data('max')),
from = container.find('.filter__slider-input-from'),
to = container.find('.filter__slider-input-to');
from.change(function() {
$('.filter__slider-element').slider('values', 0, from.val());
});
to.change(function() {
$('.filter__slider-element').slider('values', 1, to.val());
});
$this.slider({
range: true,
min: min,
max: max,
values: [min, max],
slide: function(event, ui) { // При каждом перемещении
var values = $(this).slider('option', 'values');
from.val(ui.values[0]);
to.val(ui.values[1]);
getValues(ui.values);
},
// change: function(event, ui) { // В конце перетаскивания
// getValues(ui.values);
// },
create: function() { // При создании виджета
var values = $(this).slider('option', 'values');
from.val(values[0]);
to.val(values[1]);
//getValues();
},
stop: function(event, ui) { // При завершении перетаскивания
getValues(ui.values);
}
});
});
function getValues(values) {
var total = 0;
$('.filter__slider-element').each(function() {
var values = $(this).slider("option", "values");
var dif = values[1] - values[0];
total += dif;
});
$("#totals").text(total);
}
});
.form {
padding: 3rem 0;
}
Ответ
При установке свойства values происходит событие change, поэтому его стоит раскомментировать и все заработает.
'use strict';
$(document).ready(function() {
console.log('Hello, world!');
// ---------------------------------- Range slider jq ui
$('.filter__slider-element').each(function() {
var $this = $(this),
container = $this.closest('.filter__slider'),
min = parseInt($this.data('min')),
max = parseInt($this.data('max')),
from = container.find('.filter__slider-input-from'),
to = container.find('.filter__slider-input-to');
from.change(function() {
$this.slider('values', 0, from.val());
});
to.change(function() {
$this.slider('values', 1, to.val());
});
$this.slider({
range: true,
min: min,
max: max,
values: [min, max],
slide: function(event, ui) { // При каждом перемещении
var values = $(this).slider('option', 'values');
from.val(ui.values[0]);
to.val(ui.values[1]);
getValues(ui.values);
},
change: function(event, ui) { // В конце перетаскивания
console.log('change');
getValues(ui.values);
},
create: function() { // При создании виджета
var values = $(this).slider('option', 'values');
from.val(values[0]);
to.val(values[1]);
//getValues();
},
stop: function(event, ui) { // При завершении перетаскивания
getValues(ui.values);
}
});
});
function getValues(values) {
var total = 0;
$('.filter__slider-element').each(function() {
var values = $(this).slider("option", "values");
var dif = values[1] - values[0];
total += dif;
});
$("#totals").text(total);
}
});
.form {
padding: 3rem 0;
}
Комментариев нет:
Отправить комментарий