1

我正在使用这个库： 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" />

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

4

3 回答 3

1

这里是Events。

活动

slide
拖动滑块时触发此事件

slideStart
拖动开始时触发此事件

slideStop 当拖动停止或被点击时触发此事件

change
当滑块值改变时触发此事件

slideEnabled
启用滑块时触发此事件

幻灯片禁用

此事件在滑块被禁用时触发

所以，你可以使用： -

$('#months').on('slide', function(slideEvt) {
    var newValue = slideEvt.value;
});
于 2016-02-02T12:12:49.523 回答
0

您需要做的就是将他们的文件包含到您的页面中。rest 将按照他们的示例页面中的定义进行处理：

###################
       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;
}
于 2016-02-02T11:55:18.307 回答
0

您可以通过使用事件来做到这一点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>

于 2016-02-02T12:08:54.453 回答