范围滑块开始和结束的圈子

Question

我想制作一个带有某种设计的范围滑块。我不知道如何设置输入风格。 http://prntscr.com/ebyoev像这样的 我想要做的事情是，我不知道如何实现的起点和范围滑尺的末端和如何圆风格化当前圈范围

https://jsfiddle.net/agghvm9t/这是小提琴

这是多远我都来

<div class="range-slider"> 
    <input class="range-slider__range" type="range" value="100" min="0" max="500"> 
</div> 

这是我的CSS

*, *:before, *:after { 
    box-sizing: border-box; 
} 

body { 
    font-family: sans-serif; 
    padding: 60px 20px; 
} 
@media (min-width: 600px) { 
    body { 
    padding: 60px; 
    } 
} 

.range-slider { 
    margin: 60px 0 0 0%; 
} 

.range-slider { 
    width: 100%; 
} 

.range-slider__range { 
    -webkit-appearance: none; 
    width: calc(100% - (73px)); 
    height: 10px; 
    border-radius: 5px; 
    background: #d7dcdf; 
    outline: none; 
    padding: 0; 
    margin: 0; 
} 
.range-slider__range::-webkit-slider-thumb { 
    -webkit-appearance: none; 
      appearance: none; 
    width: 20px; 
    height: 20px; 
    border-radius: 50%; 
    background: #2c3e50; 
    cursor: pointer; 
    -webkit-transition: background .15s ease-in-out; 
    transition: background .15s ease-in-out; 
} 
.range-slider__range::-webkit-slider-thumb:hover { 
    background: #1abc9c; 
} 
.range-slider__range:active::-webkit-slider-thumb { 
    background: #1abc9c; 
} 
.range-slider__range::-moz-range-thumb { 
    width: 20px; 
    height: 20px; 
    border: 0; 
    border-radius: 50%; 
    background: #2c3e50; 
    cursor: pointer; 
    -webkit-transition: background .15s ease-in-out; 
    transition: background .15s ease-in-out; 
} 
.range-slider__range::-moz-range-thumb:hover { 
    background: #1abc9c; 
} 
.range-slider__range:active::-moz-range-thumb { 
    background: #1abc9c; 
} 

.range-slider__value { 
    display: inline-block; 
    position: relative; 
    width: 60px; 
    color: #fff; 
    line-height: 20px; 
    text-align: center; 
    border-radius: 3px; 
    background: #2c3e50; 
    padding: 5px 10px; 
    margin-left: 8px; 
} 
.range-slider__value:after { 
    position: absolute; 
    top: 8px; 
    left: -7px; 
    width: 0; 
    height: 0; 
    border-top: 7px solid transparent; 
    border-right: 7px solid #2c3e50; 
    border-bottom: 7px solid transparent; 
    content: ''; 
} 

::-moz-range-track { 
    background: #d7dcdf; 
    border: 0; 
} 

input::-moz-focus-inner, 
input::-moz-focus-outer { 
    border: 0; 
} 

这是我的jquery

var rangeSlider = function(){ 
    var slider = $('.range-slider'), 
     range = $('.range-slider__range'), 
     value = $('.range-slider__value'); 

    slider.each(function(){ 

    value.each(function(){ 
     var value = $(this).prev().attr('value'); 
     $(this).html(value); 
    }); 

    range.on('input', function(){ 
     $(this).next(value).html(this.value); 
    }); 
    }); 
}; 

rangeSlider(); 

Answer 1

我会用伪元素来解决这个问题。你可以有一个：前一个：伪元素后因为你只需要两个 - 一个开头，一个结尾，它可能只是工作：

.range-slider { 
    position:relative; 
} 
.range-slider:before { 
    content: ""; 
    position: absolute; 
    left: 0; 
    background-image: url("circle-image"); 
    width: 25px; 
    height: 25px; 
} 
.range-slider:after { 
    content: ""; 
    position: absolute; 
    right: 0; 
    background-image: url("circle-image"); 
    width: 25px; 
    height: 25px; 
} 

款式滑动一圈，你可以试试像这样：

.range-slider__range::-webkit-slider-thumb { 
    -webkit-appearance: none; 
      appearance: none; 
    width: 36px; 
    height: 36px; 
    border-radius: 50%; 
    background: orange; 
    cursor: pointer; 
    -webkit-transition: background .15s ease-in-out; 
    transition: background .15s ease-in-out; 
    border: 1px solid orange; 
    box-shadow: inset 0 0 0 6px #fff; 
}