jQuery UI slider theming customization

http://forum.jquery.com/topic/ui-slider-interface-for-ui-horizontal-range-slider-does-not-make-sense

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">

<div class="slider"></div>
<br/>
<div id="color">#000000</div>

CSS

body{font:62.5% Verdana,Arial,sans-serif}
.slider {
    width: 200px;
}
#color {
    width: 178px;
    padding: 10px;
    text-align: center;
    background: #000000;
    color: #FFFFFF;
    border: 1px solid #000000;
}
.a .ui-slider {
    border-radius: 0;
}
.a .ui-slider-handle {
    border-radius: 0;
}
.b .ui-slider {
    border-radius: 0;
    height: 1.1em;
}
.b .ui-slider-handle {
    border-radius: 0;
    top: .1em;
    height: 0.75em;
}
.c .ui-slider {
    border-radius: 2px;
}
.c .ui-slider-handle {
    border-radius: 4px;
    width: 0.4em;
    margin-left: -0.2em;
}
.d .ui-slider {
    height: 0.3em;
    border-radius: 10px;
}
.d .ui-slider-handle {
    height: 1em;
    top: -0.45em;
    border-radius: 0.5em;
    width: 1em;
    margin-left: -0.5em;
}
.e .ui-slider {
    border-radius: 2px;
    height: 0.3em;
}
.e .ui-slider-handle {
    height: 1.4em;
    top: -0.55em;
    border-radius: 0 0 16px 16px;
    width: 0.7em;
    margin-left: -0.35em;
}

JavaScript

$(".slider").slider({
    value: 0,
    min: 0,
    max: 255,
    slide: function(e, ui) { 
        var hexValue = ui.value.toString(16).toUpperCase();
        if (hexValue.length < 2) hexValue = "0" + hexValue;
        
        var chosenColor = "#" + hexValue + hexValue + hexValue;
        var textColor = ui.value > 150 ? "#000000" : "#FFFFFF";
        
        $("#color").css("background", chosenColor);
        $("#color").css("color", textColor);
        $("#color").text(chosenColor);
    }
});