jQuery slider with custom css

by nickadeemus2002

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<div class="slide" id="y_2"></div>
<div class="slide" id="y_3"></div>
<div class="slide" id="y_4"></div>
<div class="slide" id="y_5"></div>

CSS

.slide .ui-slider-range {
    background: #887e6d !important;
}
.ui-slider-handle { border-color: #887e6d !important; }

JavaScript

$(".slide").slider({
    orientation: "vertical",
    min: 1,
    max: 9,
    slide: function(event, ui) {
   //alert(ui.value);
   document.getElementById("entr"+this.id).value = ui.value;
    }
  });

        // setup graphic EQ
        $( "#eq > span" ).each(function() {
            // read initial values from markup and remove that
            var value = parseInt( $( this ).text(), 10 );
            $( this ).empty().slider({
                value: value,
                range: "min",
                animate: true,
                orientation: "vertical"
            });
        });