слайдер большой палец диапазона ввода с :: раньше в chrome

Question

Я пытаюсь стиль слайдера, как на этом image. Все работает на Safari, но кажется, что хром имеет проблему с определением псевдо атрибута по другому псевдо атрибуту. Бетон это не работает - input[type=range]::-webkit-slider-thumb::before

Вот код:

.panel { 
 
    position: relative; 
 
    width: 500px; 
 
    margin-left: 50px; 
 
} 
 

 
.sections { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 40px; 
 
    overflow: hidden; 
 
} 
 

 
.sections-inner { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 10px; 
 
    top: calc(50% - 5px); 
 
} 
 

 
.section-1 { 
 
    margin-left: 20%; 
 
    width: 40%; 
 
    height: 100%; 
 
    background: pink; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.section-2 { 
 
    margin-left: 70%; 
 
    background: pink; 
 
    width: 30%; 
 
    height: 100%; 
 
} 
 

 
.range-wrapper { 
 
    display: flex; 
 
    height: 40px; 
 
    justify-content: center; 
 
} 
 

 
.range-picker { 
 
    width: 100%; 
 
    position: relative; 
 
} 
 

 
input[type=range] { 
 
    -webkit-appearance: none; 
 
    width: 100%; 
 
    background: transparent; 
 
    margin: 0; 
 
} 
 

 
input[type=range]::-webkit-slider-thumb { 
 
    -webkit-appearance: none; 
 
} 
 

 
input[type=range]:focus { 
 
    outline: none; 
 
} 
 

 
input[type=range]::-webkit-slider-thumb { 
 
    -webkit-appearance: none; 
 
    border: 1px solid #000000; 
 
    height: 24px; 
 
    width: 1px; 
 
    border-radius: 5px; 
 
    cursor: pointer; 
 
    margin-top: -6px; 
 
} 
 

 
input[type=range]::-webkit-slider-thumb::before { 
 
    content: ""; 
 
    display: block; 
 
    width: 24px; 
 
    height: 30px; 
 
    background: rgba(255, 255, 255, 0.5); 
 
    position: relative; 
 
    border: 1px solid #000; 
 
    border-radius: 5px; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate3d(-50%, -50%, 0) 
 
} 
 

 
input[type=range]::-webkit-slider-runnable-track { 
 
    width: 100%; 
 
    height: 14px; 
 
    cursor: pointer; 
 
    background: transparent; 
 
    border-radius: 1.3px; 
 
    border: 0.2px solid #010101; 
 
} 
 

 
input[type=range]:focus::-webkit-slider-runnable-track { 
 
    background: transparent; 
 
}

<div class="panel"> 
 
    <div class="sections"> 
 
    <div class="sections-inner"> 
 
     <div class="section-1"> 
 
     </div> 
 
     <div class="section-2"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="range-wrapper"> 
 
    <input type="range" class="range-picker" min="0" max="100" value="20"/> 
 
    </div> 
 
</div>

ли кто-нибудь идея, как я могу достичь, что в хроме? Спасибо за любой совет.

Answer 1

Обновлено

Вместо того, чтобы использовать изображение, можно использовать linear-gradient

Это, кажется, не работает в Chrome, так что ближе всего я мог придумать было background-image

.panel { 
 
    position: relative; 
 
    width: 400px; 
 
    margin: 30px 10px; 
 
} 
 

 
.sections { 
 
    position: absolute; 
 
    width: calc(100% - 10px); 
 
    height: 40px; 
 
    overflow: hidden; 
 
} 
 

 
.sections-inner { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 10px; 
 
    top: calc(50% - 5px); 
 
} 
 

 
.section-1 { 
 
    margin-left: 20%; 
 
    width: 40%; 
 
    height: 100%; 
 
    background: pink; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.section-2 { 
 
    margin-left: 70%; 
 
    background: pink; 
 
    width: 30%; 
 
    height: 100%; 
 
} 
 

 
.range-wrapper { 
 
    display: flex; 
 
    height: 40px; 
 
    justify-content: center; 
 
    position: relative; 
 
} 
 
.range-wrapper::before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 4px; top: 50%; 
 
    right: 9px; height: 12px; 
 
    transform: translateY(-50%); 
 
    border: 0.2px solid black; 
 
} 
 

 
.range-picker { 
 
    width: 100%; 
 
    position: relative; 
 
} 
 

 
input[type=range] { 
 
    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ 
 
    width: 100%; /* Specific width is required for Firefox. */ 
 
    background: transparent; /* Otherwise white in Chrome */ 
 
    margin: 0; 
 
} 
 

 
input[type=range]::-webkit-slider-thumb { 
 
    -webkit-appearance: none; 
 
} 
 

 
input[type=range]:focus { 
 
    outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */ 
 
} 
 

 
/* Special styling for WebKit/Blink */ 
 
input[type=range]::-webkit-slider-thumb { 
 
    -webkit-appearance: none; 
 
    background: linear-gradient(to right, black, black) no-repeat center; 
 
    background-size: 1px 13px; 
 
    height: 24px; 
 
    width: 19px; 
 
    border: 1px solid black; 
 
    border-radius: 5px; 
 
    box-sizing: border-box; 
 
    cursor: pointer; 
 
    margin-top: -5px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ 
 
} 
 

 
input[type=range]::-webkit-slider-runnable-track { 
 
    width: 100%; 
 
    height: 14px; 
 
    cursor: pointer; 
 
    background: transparent; 
 
    border-radius: 1.3px; 
 
    margin-left: -5px; 
 
} 
 

 
input[type=range]:focus::-webkit-slider-runnable-track { 
 
    background: transparent; 
 
}

<div class="panel"> 
 
    <div class="sections"> 
 
    <div class="sections-inner"> 
 
     <div class="section-1"> 
 
     </div> 
 
     <div class="section-2"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="range-wrapper"> 
 
    <input type="range" class="range-picker" min="0" max="100" value="20"/> 
 
    </div> 
 
</div>