/* Ширина слайдера */
#slider {
	    width: 200px;
	}
	/* Контейнер слайдера */
	.ui-slider {
	    position: relative;
	}
	/* Ползунок */
	.ui-slider .ui-slider-handle {
	    position: absolute;
	    z-index: 2;
	    width: 13px;   /* Задаем нужную ширину */
	    height: 13px;  /* и высоту */
	    background: url(../img/slider.png) no-repeat; /* картинка изображающая ползунок. Или можно залить цветом, задать бордюр и скругления */
	    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: #f00;
	}
	/* скругление для полосы слайдера */
	.ui-corner-all {
	    -moz-border-radius: 4px;
	    -webkit-border-radius: 4px;
	    border-radius: 4px;
	}