答案 0 :(得分:1)
从您的问题中我了解到,如果您更新输入中的值,则尝试更新或刷新滑块。
如果正确,则必须使用javascript将input
事件绑定到与滑块相关联的输入字段,然后调用滑块的setValue
函数对其进行更新。
下面可以看到一个简单的javascript示例/演示,您可以在其中更改输入字段中的值,并且滑块会自动更新
// With JQuery
$('#ex1').slider({
formatter: function(value) {
return 'Current value: ' + value;
}
});
$("#range").on("input", function(e) {
$('#ex1').slider('setValue', $(this).val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.2.0/css/bootstrap-slider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.2.0/bootstrap-slider.min.js"></script>
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14" />
<input type="text" id="range" value="" />
要在Yii中实现以上功能,您可以使用以下代码
注意:将#range_input
更改为代码中输入字段的id
,并将#slider_input_id
更改为滑块的id
。
$this->registerJs('$("#range_input").on("change",function(){
$("#slider_input_id").slider("setValue",$(this).val());
})',\yii\web\view::POS_LOAD);