Using bootstrap-slider with jQuery UI

Question

I want to use bootrap-slider with jQuery UI. I am following the documentation and loaded the plugin code after loading the Bootstrap CSS and jQuery.

However, the slider

Answer 1

The issue is that jQuery UI also has a slider widget initialized using slider() method, So there is a namespace collision.

If you want to use the bootstrap slider alone, you can download custom jQuery ui without the slider widget from the download page.

---

Or if you want to use both, initialize the bootstrap slider like:

$('#ex1').bootstrapSlider({
  formatter: function(value) {
    return 'Current value: ' + value;
  }
});

This is because, according to the following code:

if($) { // line number 1192
    var namespace = $.fn.slider ? 'bootstrapSlider' : 'slider';
    $.bridget(namespace, Slider);
}

The author is checking whether another plugin with the name slider exists in the namespace, if it exists, the slider will be assigned the name bootstrapSlider

---

$('#ex1').bootstrapSlider({
  formatter: function(value) {
    return 'Current value: ' + value;
  }
});

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