使用启用和禁用功能扩展滑块插件，如：

<script src="/slider/js/bootstrap-slider.js"></script>
<script>
$.fn.slider.Constructor.prototype.disable = function () {
    this.picker.off();
}
$.fn.slider.Constructor.prototype.enable = function () {
    if (this.touchCapable) {
        // Touch: Bind touch events:
        this.picker.on({
            touchstart: $.proxy(this.mousedown, this)
        });
    } else {
        this.picker.on({
            mousedown: $.proxy(this.mousedown, this)
        });
    }
}
</script>

演示：http://bootply.com/83445

示例html：

<div class="container" style="background-color:darkblue;">
<br>
<input id="slide" type="text" class="span2" value="" data-slider-min="-20" data-slider-max="20" data-slider-step="1" data-slider-value="-14" data-slider-orientation="vertical" data-slider-selection="after">

<button id="enable">Enable</button>
<button id="disable">Disable</button>
</div>

示例JavaScript：

$('#slide').slider();

$('#enable').click(function(){ $('#slide').slider('enable') });
$('#disable').click(function(){ $('#slide').slider('disable') });

通过将data-slider-enabled属性设置为true或false，可以实现禁用滑块的功能。
因此，您可以实现一个禁用的滑块，如下所示：

<input id="slide" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="5" data-slider-enabled="false"/>

或者像这样启用的滑块：

<input id="slide" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="5" data-slider-enabled="true"/>

你也可以像这样使用jQuery来启用和禁用你的滑块：

$("#slide").slider();
$("#slide").slider("enable");
$("#slide").slider("disable");

或者像这样使用纯JavaScript：

var slide = new Slider("#slide");
slide.enable();
slide.disable();

对于您的实现，您需要这样做：

$("#stopDrag").click(function(){
    $("#slide").slider("disable");
});

在slider容器上有一个自定义的css类，用pointer-events控制鼠标事件。然后它只是在你的JavaScript代码中添加或删除它。
CSS看起来像这样

#container {
    pointer-events:auto;
}
#container.slider-unavailable {
    pointer-events:none;
}

你只需要在slider容器元素上添加/删除类。使用angular特别好，你的代码简单地像这样：

<div class="container" ng-class="{'class1 class2 class3':true, 'slider-unavailable':sliderIsUnavailable}">
    <input id="slide" type="text" class="span2" value="" data-slider-min="-20" data-slider-max="20" data-slider-step="1" data-slider-value="-14" data-slider-orientation="vertical" data-slider-selection="after"><br>
    <label>Slider is unavailable:
        <input type="checkbox" ng-model="sliderIsUnavailable">
    </label><br>
</div>

你需要绑定mouseenter / mouseleave事件来显示/隐藏工具提示：

$.fn.slider.Constructor.prototype.disable = function() {
    this.picker.off();
}

$.fn.slider.Constructor.prototype.enable = function() {
    if (this.touchCapable) {
        // Touch: Bind touch events:
        this.picker.on({
            touchstart: $.proxy(this.mousedown, this),
            mouseenter: $.proxy(this.showTooltip, this),
            mouseleave: $.proxy(this.hideTooltip, this)
        });
    } else {
        this.picker.on({
            mousedown: $.proxy(this.mousedown, this),
            mouseenter: $.proxy(this.showTooltip, this),
            mouseleave: $.proxy(this.hideTooltip, this)
        });
    }
}

CSS：

.slider-disabled 
{
    pointer-events: none;
    opacity: 0.5;
}

然后禁用它，切换'slider-disabled'类作为方便（js，html，razor）