如何检测引导滑块的状态？

Question

我正在使用这个库： https://github.com/seiyria/bootstrap-slider

我有我的滑块：

<input id="months" data-slider-id='monthsSlider' type="text" data-slider-min="5" data-slider-max="10" data-slider-step="1" data-slider-value="5" data-slider-handle="square" />

如何检测用户何时单击滑块手柄并移动它？

Answer 1

您只需将他们的文件添加到您的页面即可。其余部分将按照示例页面中的定义进行处理：

###################
       HTML
###################

<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>



###################
    JavaScript
###################

// With JQuery
$('#ex1').slider({
    formatter: function(value) {
        return 'Current value: ' + value;
    }
});

// Without JQuery
var slider = new Slider('#ex1', {
    formatter: function(value) {
        return 'Current value: ' + value;
    }
});


###################
       CSS
###################

#ex1Slider .slider-selection {
    background: #BABABA;
}

Answer 2

您可以使用事件 slide（示例 6）

来完成此操作

$('#ex6').slider({
  formatter: function(value) {
    return 'Current value: ' + value;
  }
}).on('slide', function() {
  $('#ex6SliderVal').html(this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/6.0.13/css/bootstrap-slider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/6.0.13/bootstrap-slider.min.js"></script>

<input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3" />
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>

Answer 3

Here 是 Events.

Events

slide
This event fires when the slider is dragged

slideStart
This event fires when dragging start

slideStop This event fires when the dragging stops or has been clicked on

change
This event fires when the slider value has changed

slideEnabled
This event fires when the slider is enabled

slideDisabled

This event fires when the slider is disabled

所以，你可以使用：-

$('#months').on('slide', function(slideEvt) {
    var newValue = slideEvt.value;
});

如何检测引导滑块的状态？

How can I detect state of boostrap slider?

html

jquery

twitter-bootstrap

bootstrap-slider