Question

139

Using bootstrap-slider with jQuery UI

rated 0 times [ 141] [ 2] / answers: 1 / hits: 25252 / 10 Years ago, sat, november 1, 2014, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

harleyaleenag

Add To Favorites

Follow

Total Points: 678

Total Questions: 121

Total Answers: 105

Location: Papua New Guinea

Member since Thu, Jul 9, 2020

4 Years ago

harleyaleenag questions

1 How to use redis client in nestjs?

Thu, May 5, 22, 00:00, 2 Years ago

1 After build via Webpack 5 app stoped working on Internet Explorer (IE11)

Thu, Oct 22, 20, 00:00, 4 Years ago

1 TypeScript type for value of key in object

Wed, Aug 19, 20, 00:00, 4 Years ago

1 GDPR: youtube-nocookie embedded URL's, need visitors' permission?

Tue, May 19, 20, 00:00, 4 Years ago

1 How to wait for fetch to complete before rendering page in React.js

Thu, Mar 5, 20, 00:00, 4 Years ago

View All

answered 10 Years ago berenices · Accepted Answer

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