Как вариант.

h2 {
  position: relative;
}
h2:after {
  width: 100px;
  height: 1px;
  background: #085077;
  display: block;
  content: " ";
  position: absolute;
  left: 50%;
  margin-left: -50px;
  bottom: -30px;
}

Либо добавить снизу текста span ну или что-то в этом роде и его уже редактировать, но лучше через :after / :before

Попробуйте сделать на JS сам ползунок и отслеживать его положение, если к примеру он в диапазоне от 0px до 20px от верха ползунка, то нажимается первый кружок пагинации, если от 20px и до 40px то будет активен второй элемент пагинации, при этом саму пагинацию можно сделать прозрачной и убрать в сторону, чтобы это всё работало. И также при прокрутке колеса мыши чтобы ползунок перемещался и вызывалась функция проверки положения ползунка. Возможно не совсем понятно, но надеюсь что это вам как-то поможет.