jQuery UI slider theming customization

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

by j08691

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<p>
          testing value:
        <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
      </p>
<br>

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

var last = 0;
$(".slider").slider({
    range: "min",
    value: 1,
    min: 1,
    max: 600,
    slide: function(event, ui) {
        if (ui.value > last) $("#amount").val("this is increasing");
        if (ui.value < last) $("#amount").val("this is decreasing");
        last = ui.value;
    }
});