Slider mit dynamischem Output

Original: http://jsfiddle.net/chriscoyier/Ff9aT/

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css">
<div id="slider"></div>

CSS

body {
   padding: 50px;   
}

JavaScript

$('#slider').slider({
    range: true,
    values: [1, 100],
    create: function() {
        el = $(this);
        var temp = $("<output />", {
            'class': 'bubble bubble-1',
            'text': el.slider('values', 0)
        })
        temp.insertBefore(el);
        temp.position({
            my: "center top",
            at: "center bottom",
            of: el.find(".ui-slider-handle:eq(0)")
        });
        temp = $("<output />", {
            'class': 'bubble bubble-2',
            'text': el.slider('values', 1)
        });
        temp.insertBefore(el);
        temp.position({
            my: "center top",
            at: "center bottom",
            of: el.find(".ui-slider-handle:eq(1)")
        });
        // Maybe do these both as documentFragment
    },
    slide: function(event, ui) {
        // Probably best to cache these bubble selectors
        $('.bubble-1')
            .val(ui.values[0])
            .position({
                my: "center top",
                at: "center bottom",
                of: el.find(".ui-slider-handle:eq(0)")
            });
        $('.bubble-2')
            .val(ui.values[1])
            .position({
                my: "center top",
                at: "center bottom",
                of: el.find(".ui-slider-handle:eq(1)")
        });
    }
});
// Also the whole positioning thing might be overly heavy. Could just set `left` CSS value on change, but that doesn't have collision detection and fancy stuff like that.