Bootstrap Popover + Slider

Attempts to place a jQuery slider inside a popover.

by mmfansler

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
<div class="well">
    <a id="elem" href="#" class="btn btn-danger" rel="popover" data-original-title="Brake activity">hover for popover</a>
</div>

JavaScript

var maxValue = 100,
    $slider = $('<div>').slider({
        range: "max",
        max: maxValue,
        min: maxValue / 5,
        value: maxValue / 2
    });

$('#elem')
    .popover({
        trigger: 'manual'
    })
    .click(function() {
        var $this = $(this);
        
        if ($this.toggleClass('active').hasClass('active')) {
            $this.popover('show');
            $('.popover-content')
                .empty()
                .append($slider);
        } else {
            $slider.detach();
            $this.popover('hide');
        }
    });