/* Ширина слайдера */
#slider {
    width: 200px;
}
/* Контейнер слайдера */
.ui-slider {
    position: relative;
}
/* Ползунок */
.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 26px;   /* Задаем нужную ширину */
    height: 26px;  /* и высоту */
    background: #505050; /* картинка изображающая ползунок. Или можно залить цветом, задать бордюр и скругления */
    cursor: pointer;
    border: none !important;
}
.ui-slider .ui-slider-handle:active{
    background: #a9a9a9;
}
.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    font-size: .7em;
    display: block;
    border: 0;
    overflow: hidden;
}
/* горизонтальный слайдер (сама полоса по которой бегает ползунок) */
.ui-slider-horizontal {
     height: 12px; /* задаем высоту согласно дизайна */
}
/* позиционируем ползунки */
.ui-slider-horizontal .ui-slider-handle { 
    top: -8px;
    margin-left: -8px;
}
.ui-slider-horizontal .ui-slider-range {
    top: 0;
    height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
    left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
    right: 0;
}
/* оформление полосы по которой ходит ползунок */
.ui-widget-content { 
    border: 1px solid #D4D4D4;
    background: url('../images/new/stripe_bw.jpg');
}
/* оформление активного участка (между двумя ползунками) */
.ui-widget-header {
    border: 1px solid #D4D4D4;
    background: url('../images/new/stripe.jpg');
}
/* скругление для полосы слайдера */
.ui-corner-all {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
a.ui-corner-all {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
#slider_engine,
#slider{
    width: 80%;
    margin: 10px 0 15px;
}