JQuery UI Slider

Sample code for a JQuery UI slider

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script src="http://omnipotent.net/jquery.sparkline/2.0/jquery.sparkline.min.js"></script>
<h1>HTML Slider Test</h1>

<div id="slider"></div>
<div class="dynamicbar"></div>
<div id = "test">hello</div>

CSS

h1 {
    font-family: Helvetica, Arial;   
    font-weight: bold;
    font-size: 18px;
}

body, p{
    font-family: Helvetica, Arial;
}

#slider {
    margin-top:0.4em;
    margin-left:5%;
    margin-right:0.5em;
    width:100px;
    height:0.2em;
    float:left;
}

.ui-slider-handle {
    width:0.6em !important;
    height:0.6em !important;
}

.complete {
    background-image: url(http://images.all-free-download.com/images/graphiclarge/circle_checkmark_clip_art_11114.jpg);
    background-size:17px 17px;
    width:17px;
    height:17px;
    background-repeat:no-repeat;
    float:left;
}

JavaScript

function slideEvent(value) {
    if (value < 100) {
        $('.dynamicbar').sparkline([value,100-value],
            {
                type: 'pie',
                sliceColors: ['#eeeeee','#666666'],
                borderWidth: 1,
                borderColor: '#aaaaaa'
            });
    } else {
        $('.dynamicbar').slideToggle(100, function() {
            $('.dynamicbar').html('<div class="complete"></div>');
            $('.dynamicbar').slideToggle(100);
        });

    }
    return true;
}

$("#slider").slider({
    value:50,
    min: 0,
    max: 100,
    step: 10,
    slide: function(event, ui) { slideEvent(ui.value); }
});

slideEvent(50);