Skip to content Skip to sidebar Skip to footer

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

Solution 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);

Solution 2:

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

<?phpecho 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);

Post a Comment for "Repost/ Asking Again. Change Event In Kartik's Bootstrap-slider Extension For Yii2"