Изменения по верстке - работа в CSS , jQuery noUiSlider

Есть слайдер с рангами (https://refreshless.com/nouislider/)

https://boostshop.gratta.pro/product/14175/

Он динамический - т.е. мин и макс значения, ранги на слайдере задаются в админке

На нем создаются засечки, названия промежутков делаются через CSS

.noUi-marker-horizontal:nth-child(3):before{

content: "1";

left: -45px;

}

.noUi-marker-horizontal:nth-child(3):after {

display: inline-block;

content: "";

background: url(img/left-arrow.png) no-repeat;

background-size: contain;

height: 22px;

width: 12px;

-webkit-transform: rotate(-90deg);

-ms-transform: rotate(-90deg);

transform: rotate(-90deg);

position: absolute;

top: -48px;

left: -6px;

}

Нужно переверстать эти элементы, чтоб я смог имея произвольные промежутки, смог в передать их позицию для верстки

Примеры промежутков :

Промежуток1 0-100

Промежуток2 100-150

Промежуток3 150-200

---

Промежуток1 0-500

Промежуток2 500-750

Промежуток3 750-1000

Промежуток4 1000-1500

Т.е. мне нужно в верстку .noUi-marker-horizontal:nth-child(3):before передать позицию названия "Промежуток1"

Т.е. мне нужно в верстку .noUi-marker-horizontal:nth-child(3):after передать позицию ранга 500 для засечки

и т.д.