Change handler value when user input in textarea unique data

问题

I use bootstrap-slider Kartik extension for Yii2. I want to make slider handler responsive for textarea inputs. For this moment my textarea is responsive for sliding via slide event.

before

after

How it works right now

回答1:

What i understand from your question you are trying to update or refresh the slider if you update the value inside an input.

If that is correct you have to use javascript to bind the input event to the input field associated with the slider and then call the setValue function of the slider to update it.

A simple javascript example/demo can be seen below where you can change the value inside the input field and the slider will update automatically

// 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="" />

To implement above in Yii you can use the code below

Note: change the #range_input to the id of the input field in your code, and #slider_input_id with the id of your slider.

$this->registerJs('$("#range_input").on("change",function(){
    $("#slider_input_id").slider("setValue",$(this).val());
})',\yii\web\view::POS_LOAD);

来源：https://stackoverflow.com/questions/51707925/change-handler-value-when-user-input-in-textarea-unique-data

标签

javascript

jquery

yii2