Bootstrap-Slider benutzerdefinierte Griff

Question

Ich verstehe wirklich nicht, warum ich es nicht schaffen, den ursprünglichen Stern Griff durch ein eigenes Bild zu ersetzen. Lassen Sie uns darauf verlassen, dass plunker zu verstehen. las ich die author's documentation in dieser Frage: Beispiel 10

Auf dem vorherigen Plunker Ich tat, wie es geschrieben, dass:

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"); 
} 

Die URL Hintergrund verknüpft mit dem Bild, das ich als Handle sehen möchte. (Ersetzen des Standardsterns)

Wie Sie hier sehen können:

Neues Bild mit Alexandr Kommentar unten: Scheint nicht, etwas zu ändern.

Answer 1

ändern diese:

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

dazu:

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

Je nach der Größe des benutzerdefinierten Griffs, den Sie verwenden möchten, müssen Sie möglicherweise Anpassungen an der Zeilenhöhe vornehmen.

Answer 2

Also, wenn Sie instanzierte Schieber dann alles, was Sie tun müssen, ist Ihre CSS ändern

.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

Sie sollten Slider-handle.custom außer Kraft setzen :: vor

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