輸入範圍的滑塊 - 拇指::鉻之前

我試圖像這樣的滑塊樣式image。一切工作在Safari上，但似乎chrome在定義另一僞屬性的僞屬性時存在問題。具體這不起作用 - 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>

有沒有人一個想法，我怎麼能達到這個鍍鉻？感謝您的任何建議。

來源

2017-02-20 Radovan Kuka

更新

而不是使用圖像，可以使用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>

來源

2017-02-20 17:51:22 LGSon

你不明白。該廣場應該是該滑塊的一部分。如果可以的話，嘗試在safari中查看這個工作示例。 –

@Kuko更新了我的回答 – LGSon

我已經有了這個解決方案，但問題是，實際值應該表明內線。這意味着，當我將最小值設置爲滑塊時，該內線應位於滑塊的開始位置。看原始問題中的圖像。 –

輸入範圍的滑塊 - 拇指::鉻之前

回答

相關問題