Question

我问了这个问题today，用户给了我最好的答案，但是看来它没有用。也许是全部，因为我不是使用原始的Bootstrap-slider.js，而是使用Kartik的扩展名。所以这就是我的工作：

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

它看起来像：如您所见，slide触发器可以很好地工作，但是如果输入中的值被更改，我也会尝试更新或刷新滑块。我没有用的答案

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

可能全部是因为我使用扩展名吗？是否可以在change内使用<?php widget ?>触发器？

Answer 1

使用javascript时，应始终保持控制台或开发人员栏为打开状态，而您永远不知道何时会与其他内容发生冲突。

您需要使用parseInt()来将值传递到滑块的setValue函数，它将值解释为文本，否则将引发

未捕获的错误：传入了无效的输入值'1'

如果在文本框中键入内容时在控制台中遇到与上述相同的错误，则需要将代码更改为以下内容

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

Answer 2

我找到了解决方案。因此，我决定使用Kartik滑块的JUI滑块。这是我的代码：

Name

@MuhammadOmerAslam中的js表达式

<?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',
        ],
    ]);
?>

重新发布/再次询问。 Kartik的Yii2引导程序滑块扩展中的更改事件

2 个答案: