Пользовательский дескриптор Bootstrap-slider

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 
}