在js中不是很强,但如何设置反馈,以便在输入数字时滑块的值发生变化
$('.catalog-filter-change-price_slider-range').slider({
range: true,
min: priceMin,
max: priceMax,
values: [ priceCurMin, priceCurMax ],
slide: function (event, ui) {
setSliderValues(ui.values[0], ui.values[1]);
},
stop: function (event, ui) {
self.getNewFilterData();
}
});
<div id="mse2_ms|price" class="catalog_filter catalog-filter_price fieldset">
<div class="catalog-filter_title">Цена</div>
<div class="catalog-filter_change">
<div class="mse2_number_inputs catalog-filter-change-price_slider-inputs">
<input type="input" name="price__gte" id="price_0" value="{{ prices.price__min }}" class="form-control input-sm" />
<input type="input" name="price__lte" id="price_1" value="{{ prices.price__max }}" class="form-control input-sm" />
</div>
<div class="mse2_number_slider catalog-filter-change-price_slider-range"></div>
</div>
</div>
答案 0 :(得分:0)
基础知识如下:
$(".catalog-filter_change input").change(function() {
var p0 = $("#price_0").val();
var p1 = $("#price_1").val();
$('.catalog-filter-change-price_slider-range').slider("option", "values", [p0, p1]);
});
在此处查看更多内容:http://api.jqueryui.com/slider/#method-values
根据您提供的内容提供更完整的示例:
$(function() {
var priceMin = 1,
priceMax = 5,
priceCurMin = 1,
priceCurMax = 5;
function setSliderValues(l, h) {}
$('.catalog-filter-change-price_slider-range').slider({
range: true,
min: priceMin,
max: priceMax,
values: [priceCurMin, priceCurMax],
slide: function(event, ui) {
setSliderValues(ui.values[0], ui.values[1]);
},
stop: function(event, ui) {
self.getNewFilterData();
}
});
$(".catalog-filter_change input").change(function() {
var p0 = $("#price_0").val();
var p1 = $("#price_1").val();
$('.catalog-filter-change-price_slider-range').slider("option", "values", [p0, p1]);
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="mse2_ms|price" class="catalog_filter catalog-filter_price fieldset">
<div class="catalog-filter_title">Цена</div>
<div class="catalog-filter_change">
<div class="mse2_number_inputs catalog-filter-change-price_slider-inputs">
<input type="input" name="price__gte" id="price_0" value="1" class="form-control input-sm" />
<input type="input" name="price__lte" id="price_1" value="5" class="form-control input-sm" />
</div>
<div class="mse2_number_slider catalog-filter-change-price_slider-range"></div>
</div>
</div>