Как сделать 2 слайдера на 1 html странице?

Question

[nikmil]

https://codepen.io/alexandercastillo/pen/JmBou
Добрый вечер, подскажите пожалуйста как сделать чтобы 2 слайдера было на 1 странице? (лучше с примером, а то "слишком глупая") Спасибо!

Задам вопрос иначе, как добавить 2 слайдера на 1 страницу если они будут в разных блоках?
https://codepen.io/milnik/pen/mZXWvZ - вот пример

UPD: https://codepen.io/milnik/pen/dBdWRx вот решение:D

Answer 1

[Владислав Владислав]

https://codepen.io/vladstarikov88/pen/JQMjEE?edito...

Все, что тебе нужно было - скопировать и вставить код. И конечно же поменять состояние у двух таких компонентов (selectedRange)

Comments

[nikmil]

Забавно, но я так же делала и не получалось:D спасибо

[nikmil]

Хотя, а если 2 слайдера в разных дивах? Он так не хочет работать...

<div class="progress-box" ng-app>
  <div class="percentage-cur" ng-init="selectedRange=0">
    <span class="num">{{ selectedRange }}%</span>
  </div>
  <div class="progress-bar progress-bar-slider">
    <input class="progress-slider" type="range" min="0" max="100" ng-model="selectedRange">
    <div class="inner" ng-style="{ width: selectedRange + '%' || '0%' }"></div>
  </div>
</div>

и

<div class="progress-box" ng-app>
  <div class="percentage-cur" ng-init="selectedRange2=0">
    <span class="num">{{ selectedRange2 }}%</span>
  </div>
  <div class="progress-bar progress-bar-slider">
    <input class="progress-slider" type="range" min="0" max="100" ng-model="selectedRange2">
    <div class="inner" ng-style="{ width: selectedRange2 + '%' || '0%' }"></div>
  </div>
</div>