javascript - Repost/ asking again. Change event in Kartik's bootstrap-slider extension for Yii2

Question

I asked that question today and the user gave me best answer, but it seems that its not working. Maybe its all because i use not raw Bootstrap-slider.js but Kartik's extension. So here is what i do:

<div class="col-md-4">
    <input  type="text" 
                class="form-control" 
                id="test"
                placeholder="50000">
        <?php echo Slider::widget([
                'name'=> 'test-bi',
            'sliderColor'=> Slider::TYPE_GREY,
            'pluginEvents' => [
                 'slide' => "function(slideEvt) {
                        $('#test').val(slideEvt.value); 
                    }",
            ],
            'pluginOptions' => [
                'min'=>50000,
            'max'=>200000,
            'step'=>1,
            'tooltip'=>'hide',
            ],
            ]);
        ?>
    </div>
</div>

It looks like: As you can see slide trigger works nice, but i also trying to update or refresh the slider if the value inside an input is changed. The answer that i got not working for

$this->registerJs(
    "$('#test').on('change',function(){
        $('#w17-slider').slider('setValue',$(this).val());
    })",
    yiiwebview::POS_LOAD);

May be its all because i use extension? Is there is the way to use change trigger inside <?php widget ?> ?

Answer 1

You should always keep your console or developer bar open when working with javascript, you never know when something conflicts with the other.

You need to use parseInt() to pass a value to the setValue function of the slider, it is interpreting it as text, otherwise, it throws

Uncaught Error: Invalid input value '1' passed in

if you are getting the same error as above in your console when you type in the text box, then you need to change the code to the following

$this->registerJs(
    "$('#test').on('input',function(){
        $('#w17-slider').slider('setValue',parseInt($(this).val()));
    })",
    yiiwebview::POS_READY);