jquery slider not showing after bootstrap 4 upgrade

I’m trying to upgrade my site from Bootstrap 3 to Bootstrap 4. For some strange reason this breaks my jquery slider. It just shows a single square (like one of the handles?). There are no errors in the console.

here is my stripped down code:

<head>
  <link href="/xana/js/jquery-ui-1.11.4/jquery-ui.min.css" rel="stylesheet" type="text/css" />
  <link href="/xana/css/bootstrap-4.1.3/bootstrap.min.css" rel="stylesheet"/>
  <script src="/xana/js/jquery-1.10.2.js" type="text/javascript"></script>
  <script src="/xana/js/jquery-ui-1.11.2.custom/jquery-ui.min.js" type="text/javascript"></script>
  <script src="/xana/js/popper.min.js"type="text/javascript"></script>
  <script src="/xana/js/bootstrap-4.1.3/bootstrap.min.js" type="text/javascript"></script>
</head> 
<body>
<span id="trans-slider" class='center-block'></span>
</body>
<script type="text/javascript">
    
            //transparency slider updates map transparency
        $('#trans-slider').slider({
            value: 100,
            range: "min",
            min: 0,
            max: 100,
            animate: true,
            orientation: "horizontal",
            stop: function (event, ui) {
                updateLayerTrans(ui.value);
            }
        });
    </script>

Answer

jQuery-UI seems to want a div rather than a span tag.

$('#trans-slider').slider({
    value: 100,
    range: "min",
    min: 0,
    max: 100,
    animate: true,
    orientation: "horizontal",
    stop: function (event, ui) {
        console.log(ui.value);
        //updateLayerTrans(ui.value);
    }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

<div id="trans-slider" class='center-block mt-5 mx-5'></div>

I did setup the snippet using Bootstrap 4.6.0 rather than the much older 4.1.3 you had in your version, but it should work either way. I also setup the snippet to use jQuery 3.5.1 rather than the much older 1.10.2. Bootstrap recommends using version 3.x.

Advertisement

Answer