Setting Leaflet Layer Opacity with Slider For Bootstrap

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script src="https://rawgit.com/seiyria/bootstrap-slider/master/dist/bootstrap-slider.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/seiyria/bootstrap-slider/master/dist/css/bootstrap-slider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<h4> Setting Leaflet Layer Opacity with Slider For Bootstrap </h4>

<div class="row"> <a href="#" id="backgroundbutton" class="btn btn-inverse" rel="popover">change background opacity</a></div>

<div class="row"> <a href="#" id="vectorbutton" class="btn btn-inverse" rel="popover">change vector opacity</a></div>

<div id="popover-content" class="hide">
    <div>Opacity:
        <input type="text" class="span2" value="50" id="rangeSlider" data-slider-min="10" data-slider-max="100" data-slider-step="5" data-slider-value="50">
    </div>
</div>
    
    <div id="popover2-content" class="hide">
    <div>Opacity:
        <input type="text" class="span2" value="50" id="rangeSlider2" data-slider-min="10" data-slider-max="100" data-slider-step="5" data-slider-value="50">
    </div>
</div>
    
    <div id="map"></div>

CSS

#map { 
    height: 300px;
}

JavaScript

var centerlat = 52;
var centerlon =  0;

// set default zoom level
var zoomLevel = 5;

// initialize map
var map = L.map('map').setView([centerlat, centerlon], zoomLevel);

// Set up the OSM layer
var background = L.tileLayer(
    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
    {maxZoom: 18, opacity: 0.5}).addTo(map);

var sliderVal;

$(function () {

    $("#backgroundbutton").popover({
        html: true,
        placement: 'right',
        title: 'Background Layer',
        content: function () {
            return $("#popover-content").html();
        }
    }).click(function () {

        $('#rangeSlider').slider().on('slide', function (ev) {
            sliderVal = ev.value;
            background.setOpacity(sliderVal/100);
        });
        if (sliderVal) {
            $('#rangeSlider').slider('setValue', sliderVal);
        }
    });

});

$(function () {

    $("#vectorbutton").popover({
        html: true,
        placement: 'right',
        title: 'Vector Layer',
        content: function () {
            return $("#popover2-content").html();
        }
    }).click(function () {

        $('#rangeSlider2').slider().on('slide', function (ev) {
            sliderVal = ev.value;
            spiralLayer.setStyle({fillOpacity :sliderVal/100});
        });
        if (sliderVal) {
            $('#rangeSlider2').slider('setValue', sliderVal);
        }
    });

});

$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined' &&
     !$(e.target).parents().is('.popover.in')) {
    $('[data-original-title]').popover('hide');
  }
});

//define styles for circle markers
var dotStyleDefault = {
    radius: 5,
    fillColor: "#20a0ff",
    color: "#000",
    weight: 0,
    opacity: 1,
    fillOpacity: 0.5
};

function onEachDot(feature, layer) {
    layer.bindPopup('<table style="width:180px"><tbody><tr><td><div><b>name:</b></div></td><td><div>' + feature.properties.popup + '</div></td></tr><tr...