Особый стиль слайдера ⇐ CSS

[Anonymous]

Сейчас я пытаюсь оформить HTML-слайдер так, чтобы он выглядел примерно так:
[img]https://i.sstatic .net/1KxI8EA3.png[/img]

Однако мой стиль не работает, и большой палец ползунка приближается слишком близко к краю панели (игнорируя цвета, а не проблему прямо сейчас):


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

РЕДАКТИРОВАНИЕ: добавлен фрагмент кода

Код: Выделить всё

/* STUDY DAY SLIDER */
.days {
-webkit-appearance: none;
width: 25%;
height: 30px;
border-radius: 20px;
outline: none;
background-color: green;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
}

.days::-webkit-scrollbar-track {

}

.days::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 24px;
height: 24px;
border-radius: 50%;
border: 0;
background-color: red;
cursor: pointer;
}

.days::-webkit-slider-thumb::before {
content: var(--thumbContent);
color: white;
}

.days::-moz-range-thumb {
-webkit-appearance: none;
width: 30px;
height: 30px;
border: 0;
cursor: pointer;
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/787 ... ider-style