我为 Yii2 使用 bootstrap-slider Kartik 扩展。我想让 slider 处理程序响应文本区域输入。此时此刻,我的文本区域通过 slide 事件
响应滑动。
最佳答案
我从你的问题中了解到,如果你更新输入中的值,你正在尝试更新或刷新 slider 。
如果这是正确的,您必须使用 javascript 来绑定(bind) input
事件到与 slider 关联的输入字段,然后调用 setValue
slider 的功能来更新它。
下面是一个简单的 javascript 示例/演示,您可以在其中更改输入字段内的值, slider 将自动更新
// 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
你的 slider 。
$this->registerJs('$("#range_input").on("change",function(){
$("#slider_input_id").slider("setValue",$(this).val());
})',\yii\web\view::POS_LOAD);
关于javascript - 当用户在文本区域唯一数据中输入时更改处理程序值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51707925/