Setting Leaflet Background Layer Opacity with Slider For Bootstrap

HTML

<link rel="stylesheet" href="http://markusslima.github.io/bootstrap-filestyle/css/bootstrap.min.css">
<script src="http://markusslima.github.io/bootstrap-filestyle/js/bootstrap.min.js"></script>
<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">
<h4> Setting Leaflet Layer Opacity with Slider For Bootstrap </h4>

<div class="row"> <a href="#" id="popoverbutton" class="btn btn-inverse" rel="popover">click here</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="map"></div>

CSS

#map { 
    height: 300px;
}

JavaScript

var map = L.map('map').setView([54, -0.5], 5);

// 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 () {

    $("#popoverbutton").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 rangeSlider(sliderVal) {
    	background.setOpacity(sliderVal)
    }