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="default">
    default <div class="slider"></div>
</div>

<div class="alt a">
    A. <div class="slider"></div>
</div>
 
<div class="alt b">
    B. <div class="slider"></div>
</div>
 
<div class="alt c">
    C. <div class="slider"></div>
</div>

<div class="alt d">
    D. <div class="slider"></div>
</div>

<div class="alt e">
    E. <div class="slider"></div>
</div>

CSS

body{font:62.5% Verdana,Arial,sans-serif}
.default, .alt {
    margin: 1em;
    padding: 1em;
}
.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: 0.5em;
    margin-left: -0.5em;
}
.e .ui-slider {
    border-radius: 2px;
    height: 0.3em;
}
.e .ui-slider-handle {
    height: 2em;
    top: -1.5em;
    border-radius: 0.4em;
    width: 0.4em;
    margin-left: -0.35em;
}

JavaScript

$( ".slider" ).slider({
    value: 50
});