Ankhena

Что делать?

Выложить ваш код в песочницу или самостоятельно проверить его на валидность.

Потому что градиент не имеет отношения к z-index.
https://jsfiddle.net/ucg6tm0b/

Хотя возможен вариант телепатии и градиент вовсе не у блока, а у кого-то другого, например, у псевдо. А дальше вступает в игру контекст наложения. Но как именно, телепатии уже не видно.

Просто верстка, с которой потом можно делать что угодно на js

Либо готовый ion range slider

Вообще js.

https://jsfiddle.net/ey4kx859/
Уберите у .block justify-content: space-between, а тексту допишите flex-grow: 1;
Но работать это будет до тех пор, пока высота остального контента одинакова.

p.s. зачем вы делаете вложенные селекторы, да еще и космического уровня, если пишете по БЭМу?

.block1::placeholder {
  color: #333;
}
.block1::placeholder {
  color: #999;
}

Не нужно самому писать префиксы, во-первых, потому что забыли написать основное свойство без префиксов, во-вторых, потому что для этого есть автопрефиксер (а еще лучше пакетом в сборку), который лучше вас знает каким браузерам нужны префиксы.

Обычный div, у него padding
https://jsfiddle.net/6d2b8xva/
Для адаптива - размеры в % или через псевдоэлемент, кому как удобнее.