부트 스트랩 - 슬라이더 사용자 정의 핸들

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

당신은 내가 당신 사업부의 .slider-handle.custom를 참조 해달라고

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