Bootstrap滑块在更改时更改标签值（即，单击滑块而不是滑动按钮）

Question

我有一个垂直引导滑块，我想通过单击栏来移动滑块时设置标签的值。

         <form role="form" id="programEditForm">
            <div class="blueBorder col-lg-1 col-md-1 col-sm-1 col-xs-1">
                <label for="ex4" class="col-form-label text-left">Interval</label>
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <input id="ex4" type="text" data-slider-min="5" data-slider-max="60" data-slider-step="5" 
                        data-slider-value="30" data-slider-orientation="vertical">
                    <label  id="ex4CurrentSliderValLabel"><span id="ex4SliderVal">30</span> m</label>               
                </div>
            </div>
        </form>

这在您滑动按钮时起作用：

$("#ex4").on("slide", function(slideEvt) {
    $("#ex4SliderVal").text(slideEvt.value);
});

当您单击滑块并且按钮移至新位置时，它不起作用。我尝试过：

$("#ex4").change(function(slideEvt) {
    $("#ex4SliderVal").text(slideEvt.value);
});

这将返回“ [object Object]”。

我也尝试过：

$("#ex4").on("slide", function(slideEvt) {
    $("#ex4SliderVal").text(slideEvt.value);
    alert($('#ex4').data('slider').getValue());
}).change(function() {
    $("#ex4SliderVal").text($('#ex4').data('slider').getValue());
});

这适用于滑动，单击栏中没有任何价值/响应。