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。

<强>事件

<强>滑动
  拖动滑块时会触发此事件

<强> slideStart
  这个事件发生时会发生   拖动开始

<强> slideStop   拖动停止或单击
时会触发此事件
更改
  滑块值更改时会触发此事件

<强> slideEnabled
  这个事件   启用滑块时触发

slideDisabled

此事件触发   禁用滑块时

所以，您可以使用： -

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

如何检测boostrap滑块的状态？

3 个答案: