1

Ребят, подскажите пожалуйста, каким образом можно реализовать (стилизовать) ползунок таким образом, чтобы полоса его заполнения плавно расширялась слева направо. Конкретика: как сделать ползунок таким,чтобы в сначала он был высотой 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;

}

Вот что хочу получить ползунок jQuery

1
  • 1
    Дополните сообщение вашим кодом, тогда помочь вам будет проще.
    – kizoso
    Commented 30 мар. 2017 в 23:01

2 ответа 2

3

Можно сделать подобный механизм с помощью SVG:

var i = document.getElementsByTagName('input')[0], polygon = document.getElementById('fill');
function slide(e){
    var pos = +i.value;
    polygon.setAttribute("points", "0,16  "+pos+","+(16+ (pos*16)/400)+" "+pos+","+(16-(pos*16)/400));
}
<svg width="400" height="32">
	<polygon points="0,16 400,32 400,0" fill="rgba(255,255,255,0)" stroke-width="1" stroke="rgb(0,0,0)"/>
	<polygon id="fill" points="" fill="rgb(255,222,77)" stroke-width="0" stroke="rgb(0,0,0)"/>
</svg>

<input oninput="slide()" type="range" min="0" max="400" step="1" value="0">

2
  • Очень интересно. Сейчас попробую. А можете объяснить,что к чему? Дабы познать как это делается. Я не силен в этом. В смысле,пока только брать готовое и изменять под себя умею
    – Olejjon
    Commented 31 мар. 2017 в 12:54
  • @Olejjon Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа) и не забудьте пожалуйста поблагодарить автора плюсом за хороший ответ Commented 31 мар. 2017 в 17:57
1

Положите поверх треугольник. Например, треугольник из border:

.bar {
  background: rgb(133, 124, 211);
  background: -moz-linear-gradient(-45deg, rgba(133, 124, 211, 1) 0%, rgba(112, 176, 224, 1) 100%);
  background: -webkit-linear-gradient(-45deg, rgba(133, 124, 211, 1) 0%, rgba(112, 176, 224, 1) 100%);
  background: linear-gradient(135deg, rgba(133, 124, 211, 1) 0%, rgba(112, 176, 224, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#857cd3', endColorstr='#70b0e0', GradientType=1);
  height: 48px;
  position: relative;
}

.bar:before {
  content: " ";
  border: 44px solid #ccc;
  border-color: #fff transparent;
  border-width: 44px 99vw 0 0;
  top:0;
  position:absolute;
}
<div class=bar></div>

2
  • Это пробовал. Не вышло них... Ничего не получилось в общем
    – Olejjon
    Commented 31 мар. 2017 в 14:06
  • Оооо, стопэ! =) Конус получился отлично. А теперь менять его css.ширину через ивенты в JS,верно?
    – Olejjon
    Commented 31 мар. 2017 в 14:47

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.