Использование загрузочного слайдера с пользовательским интерфейсом jQuery

Я хочу использовать загрузочный слайдер с пользовательским интерфейсом jQuery. Я следую документации и загружаю код плагина после загрузки Bootstrap CSS и jQuery.

Однако слайдер не получает инициализацию - <input> остается таким, какой он есть, и я не вижу ошибок в консоли браузера.

Ниже приведен код:

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="#" onclick="location.href='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'; return false;" 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>

Не могли бы вы рассказать мне, что не так?

Ответ 1

Проблема заключается в том, что пользовательский интерфейс jQuery также имеет слайдер-виджет, инициализированный с использованием метода slider(). Таким образом, существует конфликт пространства имен.

Если вы хотите использовать только слайдер bootstrap, вы можете загрузить пользовательский jQuery ui без виджета слайдера с страницы загрузки.

Или, если вы хотите использовать оба варианта, инициализируйте слайдер начальной загрузки, например:

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

Это связано с тем, что в соответствии со следующим кодом:

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

Автор проверяет, существует ли еще один плагин с ползунком имени в пространстве имен, если он существует, ползунку будет присвоено имя 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" />

Ответ 2

Переупорядочение файлов script и удаление jquery-ui.min.js заставляет его работать.

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="#" onclick="location.href='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'; return false;" 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>