CSS：スタイリング範囲の入力？

Question

私は親指と自身のイメージを使用する範囲の入力をスタイルと厚く、大きな親指の下のラインを作るためにどのよう見当がつかないTHIS

ように見える範囲の入力のスタイルを設定しようとしています。私はこのFIDDLE

に非常に基本的な例を入れてなかった

は、範囲の親指のための独自のイメージを使用することも可能ですし、どのように私は、などのラインが太く長くなって行くのでしょうか？

これは私のCSSです：

input[type=range] { 
    -webkit-appearance: none; 
    background-color: blue; 
    width: 200px; 
    height:20px; 

} 

input[type="range"]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    background-color: #666; 
    opacity: 0.5; 
    width: 10px; 
    height: 26px; 
    background-image:url('THUMB-ICON.png'); 
} 

どれアドバイスをいただければ幸いです。

どこかの取得私は思う：https://jsfiddle.net/BNm8j/5586/

編集：

私はこれにいくつかの変更をしたが、親指の上部が欠落している理由を私は知らないのですか？

https://jsfiddle.net/BNm8j/5588/

任意のアイデア誰ですか？これはあなたを助け

<div id="DIV_1"> 
    <div id="DIV_2"> 
    </div><a id="A_3"></a> 
</div> 

希望：

Answer 1

は、ここでは一例リンクの元のCSSです。

enter code here 
#DIV_1 { 
    box-sizing: border-box; 
    color: rgb(92, 92, 92); 
    float: left; 
    height: 11px; 
    overflow-wrap: break-word; 
    position: relative; 
    touch-action: none; 
    width: 705px; 
    word-wrap: break-word; 
    column-rule-color: rgb(92, 92, 92); 
    perspective-origin: 352.5px 5.5px; 
    transform-origin: 352.5px 5.5px; 
    background: rgb(222, 222, 222) none repeat scroll 0% 0%/auto padding-box border-box; 
    border: 0px none rgb(92, 92, 92); 
    border-radius: 3px 3px 3px 3px; 
    font: normal normal normal normal 16px/normal Omnes, sans-serif; 
    margin: 11px 30px 0px; 
    outline: rgb(92, 92, 92) none 0px; 
}/*#DIV_1*/ 

#DIV_2 { 
    box-sizing: border-box; 
    color: rgb(92, 92, 92); 
    height: 11px; 
    overflow-wrap: break-word; 
    position: absolute; 
    top: 0px; 
    width: 122px; 
    word-wrap: break-word; 
    column-rule-color: rgb(92, 92, 92); 
    perspective-origin: 61px 5.5px; 
    transform-origin: 61px 5.5px; 
    background: rgb(0, 143, 213) none repeat scroll 0% 0%/auto padding-box border-box; 
    border: 0px none rgb(92, 92, 92); 
    border-radius: 3px 3px 3px 3px; 
    font: normal normal normal normal 16px/normal Omnes, sans-serif; 
    outline: rgb(92, 92, 92) none 0px; 
}/*#DIV_2*/ 

#A_3 { 
    background-position: -65px 0px; 
    box-sizing: border-box; 
    color: rgb(247, 144, 47); 
    cursor: default; 
    display: block; 
    height: 59px; 
    left: 155px; 
    overflow-wrap: break-word; 
    position: absolute; 
    text-decoration: none; 
    top: -22px; 
    touch-action: none; 
    width: 58px; 
    word-wrap: break-word; 
    z-index: 100; 
    column-rule-color: rgb(247, 144, 47); 
    perspective-origin: 29px 29.5px; 
    transform-origin: 29px 29.5px; 
    background: rgba(0, 0, 0, 0) url("https://www.wonga.com/sites/all/themes/pizaz/images/mint/toolkit.png?v=2.2") no-repeat scroll -65px 0px/auto padding-box border-box; 
    border: 0px none rgb(247, 144, 47); 
    font: normal normal normal normal 16px/normal Omnes, sans-serif; 
    margin: 0px 0px 0px -62px; 
    outline: rgb(247, 144, 47) none 0px; 
}/*#A_3*/