.gas-slider { position: relative; width: 322px; &__input { width: 322px; margin-left: -2px; z-index: 2; } input[type=range] { -webkit-appearance: none !important; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none !important; height: 34px; width: 34px; background-color: var(--color-primary-default); border-radius: 50%; position: relative; z-index: 10; } &__bar { height: 6px; width: 322px; background: var(--color-background-alternative); display: flex; justify-content: space-between; position: absolute; top: 16px; z-index: 0; border-radius: 4px; } &__colored { height: 6px; border-radius: 4px; margin-left: 102px; width: 322px; z-index: 1; background-color: var(--color-primary-muted); } &__labels { @include H7; display: flex; justify-content: space-between; margin-top: -6px; color: var(--color-text-alternative); } }