Ребят, подскажите пожалуйста, каким образом можно реализовать (стилизовать) ползунок таким образом, чтобы полоса его заполнения плавно расширялась слева направо. Конкретика: как сделать ползунок таким,чтобы в сначала он был высотой 4px, а под конец (width:1920px;) высота его составляла 32px?
Застрял караул как. Уже третий день не сплю. Помогите,а? И если есть возможность - объясните, как у вас получилось это реализовать?
<script type="text/javascript">
$("#slider").slider({
min: 0,
max: 100,
values: [0,100],
range: true
});
</script>
CSS
/* Ширина слайдера */
#slider {
width: 200px;
}
/* Контейнер слайдера */
.ui-slider {
position: relative;
}
/* Ползунок */
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 13px;
/* Задаем нужную ширину */
height: 13px; /* и высоту */
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;
}