引导滑块设置值问题 [英] Bootstrap slider set value issue

问题描述

我使用 引导滑块 并寻找一种方法来设置句柄的值输入类型="文本"我设法为处理程序的输入设置值，如何以相反的方式进行?

I use bootstrap slider and looking for a way to set a value of the handle from the input type="text" I managed to set value for input from the handler, how do do it in opposite way?

$("#ex6").slider();
$("#ex6").on("slide", function(slideEvt) {
    $("#ex6SliderVal1").val(slideEvt.value[0]);
    $("#ex6SliderVal2").val(slideEvt.value[1]);
});

这是我的小提琴

请指教，谢谢

推荐答案

使用以下代码根据输入文本更改处理程序值:

Use below's code to change handler value based on input text :

var minSliderValue = $("#ex1").data("slider-min");
var maxSliderValue = $("#ex1").data("slider-max");

$('#ex1').slider({
    value : 0,
	formatter: function(value) {
		return 'Current value: ' + value;
	}
});

$("#inputValue").on("keyup", function() {
    var val = Math.abs(parseInt(this.value, 10) || minSliderValue);
    this.value = val > maxSliderValue ? maxSliderValue : val;
    $('#ex1').slider('setValue', val);
});

.wrapper {
    padding : 20px;
    margin-top : 20px;
}

<link href="http://seiyria.com/bootstrap-slider/css/bootstrap-slider.css" rel="stylesheet"/>
<link href="http://seiyria.com/bootstrap-slider/dependencies/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://seiyria.com/bootstrap-slider/js/bootstrap-slider.js"></script>
<div class="wrapper">
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" />
    <hr />
    <input type="text" class="form-control" id="inputValue" value="0" />
</div>

这是我的 jsFiddle，用于全面实施改变价值，反之亦然.

Here is my jsFiddle for full implementation on changing value vice versa.

这篇关于引导滑块设置值问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！