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 is not getting initialized - the <input> remains as it is, and I don't see any error in browser console.

Following is the code:

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" media="all" />   
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js" type="text/javascript"></script>
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> 

        <link rel="stylesheet" type="text/css" href="./slider/bootstrap-slider.css" media="all" />
        <script src="./slider/bootstrap-slider.js"></script>

    </head>

    <body>
            <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"/>

    <script type="text/javascript">

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

        </script>

    </body>

Could you please tell me what is wrong?

T J · Accepted Answer · 2014-11-04 09:20:39Z

57

+50

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;
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://raw.githack.com/seiyria/bootstrap-slider/master/css/bootstrap-slider.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://raw.githack.com/seiyria/bootstrap-slider/master/js/bootstrap-slider.js"></script>
<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" />

edited Nov 4, 2014 at 9:20

answered Nov 4, 2014 at 8:43

T J

43.2k13 gold badges87 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Matt Over a year ago

Excellent answer. Thank you. I would like to award your answer, but i can do that in 13 hours.

Nishi Bangar Over a year ago

Hi @T J , i am facing the same problem and i tried using ".bootstrapSlider" instead ".slider" , but nothing seems to change thus i am only left with am empty text box... Can you help me out with this?

T J Over a year ago

@NishiBangar Are you using the same plugin? If so, which version? It'd be easier to check what the issue is if you can create an online demo demonstrating the issue...

Nishi Bangar Over a year ago

@TJ , Here is the code sample.

T J Over a year ago

@NishiBangar You're using AngularJS that's a whole different issue... You should create an AngularJS directive (maybe there is one already) for the slider instead of trying to initialize in the controller.

|

Collectives™ on Stack Overflow

Using bootstrap-slider with jQuery UI

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related