输入范围的滑块 - 拇指::铬之前

我试图像这样的滑块样式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

我已经有了这个解决方案，但问题是，实际值应该表明内线。这意味着，当我将最小值设置为滑块时，该内线应位于滑块的开始位置。看原始问题中的图像。 –

输入范围的滑块 - 拇指::铬之前

回答

相关问题