Слайдер начальной загрузки не загружается - PullRequest
Новая
       2

Слайдер начальной загрузки не загружается

0 голосов
/ 19 декабря 2018

Я написал этот html и включил все файлы из cdn, но я все еще вижу слайдер без клейкой этикетки, так что я пропустил? 

<!doctype html>
<html lang="en">
<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.4.2/css/bootstrap-slider.css">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.4.2/bootstrap-slider.js"></script>

</head>
<body>
    <form>
        <div>
            Slider with single value and label:<br/><br/>
            <span id="ex18-label-1" class="hidden">
            Example slider label
          </span>
            <input id="ex18a" type="text" /><br/><br/><br/>
        </div>

    </form>

<script>
    $('#ex18a').slider({
        min  : 0,
        max  : 10,
        value: 5,
        labelledby: 'ex18-label-1'
    });

</script>
</body>
</html>

Полный пример

Ответы [ 2 ]

0 голосов
/ 19 декабря 2018

Можно подтвердить, что на данный момент это работает только с Bootstrap v3, достаточно было изменить связанные таблицы стилей для отображения надписи выше 

$('#ex18a').slider({
  min: 0,
  max: 10,
  value: 5,
  labelledby: 'ex18-label-1'
});
<!doctype html>
<html lang="en">

<head>
  <!-- Bootstrap CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.4.2/css/bootstrap-slider.css">

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.4.2/bootstrap-slider.js"></script>

</head>

<body>
  <form>
    <div>
      Slider with single value and label:<br/><br/>
      <span id="ex18-label-1" class="hidden">
            Example slider label
          </span>
      <input id="ex18a"  type="text" /><br/><br/><br/>
    </div>

  </form>

  <script>
  </script>
</body>

</html>
0 голосов
/ 19 декабря 2018

Я продолжал исследовать эту проблему, и оказалось, что проект bootstrap-slider еще не на 100% совместим с Bootstrap 4.Авторы проекта работают над ним, и, похоже, значительная часть его уже сделана, но необходимо провести тестирование и тому подобное, прежде чем он будет выпущен в CDN.Посмотрите прогресс проекта на GitHub по этой ссылке и дополнительную информацию по всплывающей подсказке здесь .Скорее всего, вам придется либо использовать Bootstrap 3, либо найти другую библиотеку, которая уже доказала свою работоспособность с Bootstrap 4.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...