ブートストラップスライダのカスタムハンドル

Question

なぜ私は元のスターハンドルを自分の写真で置き換えることができないのか分かりません。 そのことを理解するためにplunkerに頼りましょう。 は、私はその問題にauthor's documentationをお読みください。例10

私は以前plunkerにそれが書かれていますように、その：

HTML：

<input id="ex10" type="text" data-slider-handle="custom"/> 

CSS：

.slider-handle.custom { 
    background: transparent url("http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-8/128/Accept-icon.png"); 
} 

URL私はハンドルとして見たい画像にリンクされた背景。 （デフォルトの星の置き換え）。

あなたがここに見ることができるよう：以下アレクサンドルさんのコメント付き

新しい写真： は何も変更していないようです。あなたインスタンス化されたスライダー場合

Answer 1

変更を変更され、この：これに

.slider-handle.custom::before { 
    line-height: 20px; 
    font-size: 20px; 
    content: '\2605'; 
    color: #726204; 
} 

：

.slider-handle.custom::before { 
     line-height: 20px; 
     font-size: 20px; 
     content: "url-of-your-picture"; 
     color: #726204; 
    } 

使用するカスタムハンドルのサイズに応じて、線の高さを調整する必要がある場合があります。

Answer 2

は、それではあなたがする必要があるすべてはあなたのCSS

.slider-handle.custom { 
    background: transparent none; 
    /* Add your background image */ 
    background-image: url("http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-8/128/Accept-icon.png"); 
    background-size: contain; 
} 

/* Or display content like unicode characters or fontawesome icons */ 
.slider-handle.custom::before { 
    line-height: 20px; 
    font-size: 20px; 
    /* Comment this because you will not use star */ 
    /*content: '\2605'; /*unicode star character*/ 
    color: #726204;*/ 
} 

Answer 3

あなたはスライダーhandle.customをオーバーライドする必要があります::

.slider-handle.custom::before { 
     display:none 
}