问题:

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]); });

Here is my fiddle

Please advise, thanks

回答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>

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

转载请标明出处:Bootstrap slider set value issue

文章来源: Bootstrap slider set value issue

标签

slider