Как изменить размер?

Question

[Bartf]

Привет, юзаю этот пример полоски слайдера, можно как-то сделать что бы она не цвет меняла а высоту?
https://codepen.io/mjtweaver/pen/pEkYgQ

Answer 1

[secretsergey]

Если правильно понял, то вот - https://codepen.io/secretsergey/pen/VweeJgz

Comments

[Bartf]

не совсем, при продвижении по слайдам полоска та что сейчас чорная должна быть высотой 3рх а стандартная "по которой она движеться" 1рх

[secretsergey]

Bartf, Обновил, сейчас посмотрите.

[Bartf]

secretsergey, Да именно так спасибо, а что именно вы редагировали? Что бы я в проекте изменил

[secretsergey]

Bartf,
HTML.
Добавляем в progress блок:
<div class="progress-bar"></div>

CSS.
Меняем:

.progress {
  display: block;
  width: 100%;
  height: 10px;
  border-radius: 10px;
  overflow: hidden;
  
  background-color: #f5f5f5;
  background-image: linear-gradient(to right, black, black);
  background-repeat: no-repeat;
  background-size: 0 100%;
  
  transition: background-size .4s ease-in-out;
}

на

.progress {
  display: block;
  width: 100%;
  height: 1px;
  border-radius: 10px;
  position: relative;
  
  background-color: #f5f5f5;
}

.progress-bar {
  position: absolute;
  left: 0;
  top: -1px;
  width: 0;
  height: 3px;
  display: block;
  background: #000;
  border-radius: 2px;
  transition: width .4s ease-in-out;
}

JS.
Меняем:
var $progressBar = $('.progress');
на
var $progressBar = $('.progress-bar');
Меняем:
.css('background-size', calc + '% 100%')
на
.css('width', calc + '%')

Вроде ничего не упустил :)