
 a {

outline: none;

}
/* Ширина слайдера */
#slider {

    width: 200px;
}

/* Контейнер слайдера */

.ui-slider {

    position: relative;
	margin-top: 10px;
	margin-left: 4px;
}

/* Ползунок */

.ui-slider .ui-slider-handle {

    position: absolute;
    z-index: 2;

    width: 13px;   /* Задаем нужную ширину */

    height: 13px;  /* и высоту */

    background: url(../img/slider.png) no-repeat; /* картинка изображающая ползунок. Или можно залить цветом, задать бордюр и скругления */
 border: none;
    cursor: pointer

}

.ui-slider .ui-slider-range {

    position: absolute;

    z-index: 1;

    font-size: .7em;

    display: block;

    border: 0;

    overflow: hidden;

}

/* горизонтальный слайдер (сама полоса по которой бегает ползунок) */


.ui-slider-horizontal {

     height: 3px; /* задаем высоту согласно дизайна */
}

/* позиционируем ползунки */

.ui-slider-horizontal .ui-slider-handle { 

    top: -5px;

    margin-left: -6px;

}

.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: #fff;

}

/* оформление активного участка (между двумя ползунками) */

.ui-widget-header { 

    border: 1px solid #D4D4D4;

    background: #2aa5e5;

}

/* скругление для полосы слайдера */

.ui-corner-all {
    -moz-border-radius: 4px;

    -webkit-border-radius: 4px;

    border-radius: 4px;

}
