範囲の始まりと終わりの円のスライダ

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

私は疑似要素を使用してこれにアプローチします。先頭の1と最後に1つ、それだけでうまくいくかもしれない - 擬似要素の後に、あなた以来、2つだけを必要とする：

.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; 
} 

スライディング円をスタイルに、あなたが試すことができます前に、と1：あなたは1を持つことができます

.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; 
}