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

问题

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());
    })",
    \yii\web\view::POS_LOAD);

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

回答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()));
    })",
    \yii\web\view::POS_READY);

回答2:

I found the solutions. So i decided to use JUI slider intead of Kartik's slider. Here is my code:

<?php echo Slider::widget([
        'clientOptions' => [
            'min' => 1,
            'max' => 200000,
        ],
        'clientEvents' => [
            'slide'=> "function (event, ui) {
              $('#" .$value['strategy_title']   . "-amount').val(ui.value);
        }"
        ],
        'options' => [
            'class' => 'slider',
            'id' => $value['strategy_title']    . '-slider',
        ],
    ]);
?>

And js expression from @MuhammadOmerAslam

$this->registerJs("$('.amount').on('input',function() { 
         $('.slider').slider('value', $(this).val());
    })", 
    \yii\web\view::POS_READY);

来源：https://stackoverflow.com/questions/51711920/repost-asking-again-change-event-in-kartiks-bootstrap-slider-extension-for-yi

标签

javascript

jquery

yii2