Владимир

По ангуляру - METANIT

Это можно сделать при помощи css, js тут не нужен.
background-attachment: fixed;

cssreference.io/backgrounds

type="number"

Не просто можно, а нужно.

<div class="header">
    <div class="header__top">
        <div class="logo"></div>
    </div>
    ...
</div>

<input type="checkbox" name="ch" id="ch">
<label for="ch"></label>

label {
  display: block;
  width: 20px;
  height: 20px;
  background: #fff;
  border:2px solid red;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
}

label:after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  background: red;
  border-radius: 50%;
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 5px;
  display: none;
}

input[type="checkbox"]{
  display: none;
}

input[type="checkbox"]:checked~label:after {
  display: block;
}

jsbin

Ion.RangeSlider
Позицию блоков с цифрами легко настроить через CSS, так чтобы они были поверх полоски.

Пример: jsfiddle.net/IonDen/tLzou080

Еще пример, тут блоки не выходят за границу ползунка: jsfiddle.net/IonDen/c8n8oynd