[英]bootstrap-slider link input number with slide change
我正在使用bootstrap-slider.js
。 我的問題是我無法將輸入數字與幻燈片鏈接起來。 如果輸入數字更改,我也想滑動更改。
滑塊
<div id="slider-year" class="search-block">
<h2 class="title">Production year</h2>
<div class="slider-year-amount">
<span class="pull-left">1900</span>
<span class="pull-right">2017</span>
</div>
<input type="text" class="year-slider" style="width:100%" data-slider-min="1900" data-slider-max="2017" data-slider-step="1" data-slider-value="[1900,2017]" />
<div class="row">
<div class="year-box">
<div class="col-lg-6">
<label>From</label>
<input type="number" min="1900" max="2019" class="form-control" placeholder="1900" id="minYear" value="1900" name="year_since">
</div>
<div class="col-lg-6">
<label>To</label>
<input type="number" min="1901" max="2020" class="form-control" placeholder="2017" id="maxYear" value="2017" name="year_to">
</div>
</div>
</div>
</div>
我如何嘗試更新滑塊:
jQuery("#minYear").change(function () {
jQuery("#slider-year").slider('setValue', jQuery(this).val());
});
如果有人好奇,這里還有此滑塊的文檔,我在那里找不到解決方案: http://www.eyecon.ro/bootstrap-slider
: http://www.eyecon.ro/bootstrap-slider
JsFiddle: https ://jsfiddle.net/y95vfds3/6/
許多年過去了......無論如何,這是我的解決方案:
$('#year-slider').slider()
.on('slide', function(ev) {
$('#minYear').val(ev.value[0]);
$('#maxYear').val(ev.value[1]);
});
$('.form-control').on('input', function() {
let minVal = parseInt($('#minYear').val());
let maxVal = parseInt($('#maxYear').val());
$('#year-slider').slider('setValue', [minVal, maxVal])
});
你想要這樣嗎?
$("#minYear").change(function() {
$("#slider-year").slider('setValue', jQuery(this).val());
});
val = $('.year-slider').slider();
$('.year-slider').on('slide', function(ev) {
$('#minYear').val(ev.value[0]);
$('#maxYear').val(ev.value[1]);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.