submit при изменении слайдера
Есть слайдер под тегом form. Не получается сделать так, что бы форма выполняла submit при движении ползунка слайдера
$('.input-number').each(function() {
var $this = $(this),
$input = $this.find('input[type="number"]'),
up = $this.find('.qty-up'),
down = $this.find('.qty-down');
down.on('click', function() {
var value = parseInt($input.val()) - 1;
value = value < 1 ? 1 : value;
$input.val(value);
$input.change();
updatePriceSlider($this, value)
})
up.on('click', function() {
var value = parseInt($input.val()) + 1;
$input.val(value);
$input.change();
updatePriceSlider($this, value)
})
});
var priceInputMax = document.getElementById('price-max'),
priceInputMin = document.getElementById('price-min');
priceInputMax.addEventListener('change', function() {
updatePriceSlider($(this).parent(), this.value)
});
priceInputMin.addEventListener('change', function() {
updatePriceSlider($(this).parent(), this.value)
});
function updatePriceSlider(elem, value) {
if (elem.hasClass('price-min')) {
console.log('min')
priceSlider.noUiSlider.set([value, null]);
} else if (elem.hasClass('price-max')) {
console.log('max')
priceSlider.noUiSlider.set([null, value]);
}
}
// Price Slider
var priceSlider = document.getElementById('price-slider')
var minn = priceSlider.getAttribute("min")
var maxx = priceSlider.getAttribute("max")
if (priceSlider) {
noUiSlider.create(priceSlider, {
start: [Number(minn), Number(maxx)],
connect: true,
step: 1,
range: {
'min': Number(minn),
'max': Number(maxx)
}
});
priceSlider.noUiSlider.on('update', function(values, handle) {
var value = values[handle];
handle ? priceInputMax.value = value : priceInputMin.value = value
});
}
<form action="{% url 'products:index' %}" method="get" id="form1" name="theForm">
<div class="aside">
<h3 class="aside-title">Цена</h3>
<div class="price-filter">
<div id="price-slider" min="{{ min_price }}" max="{{ max_price }}"></div>
<div class="input-number price-min">
<input id="price-min" name="Category" type="number">
<span class="qty-up">+</span>
<span class="qty-down">-</span>
</div>
<span>-</span>
<div class="input-number price-max">
<input id="price-max" type="number">
<span class="qty-up">+</span>
<span class="qty-down">-</span>
</div>
</div>
</div>