Using bootstrap-slider with jQuery UI

2020-07-03 04:35发布

站内问答 / JavaScript
803 2 4

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?

2条回答
不美不萌又怎样
2楼-- · 2020-07-03 05:07

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

查看更多
0人赞 添加讨论(0) 举报
戒情不戒烟
3楼-- · 2020-07-03 05:17

Rearranging script files and removing jquery-ui.min.js makes it work.

<html>
<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>
    <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'  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>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <style type="text/css">
        #ex1Slider .slider-selection {
            background: #BABABA;
        }
    </style>
</body>
</html>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)