텍스트와 모양이 원형 인 noUiSlider 핸들을 사용자 정의하십시오.

Question

저는 이제 noUiSlider에 익숙해지고 있습니다. 나는 그것을 사용하는 여러 가지 방법으로 어떻게 존재하는지에 대한 예를 찾고자했습니다. 불행히도 대부분은 텍스트를 추가하는 대신 사용자 정의 이미지를 추가하고있었습니다.

누구나 css 또는 js 파일을 사용하여 고유 한 방식으로 핸들을 디자인하는 방법에 대한 예를 알고 있습니까?

Answer 1

모든 핸들 스타일은 .noUi-handle입니다. 핸들의 '조각'은 :before 및 :after 가상 요소를 사용하여 수행됩니다. 이 요소와 해당 content 속성을 사용하여 텍스트를 표시 할 수 있습니다.

.noUi-handle { 
    border: 1px solid #D9D9D9; 
    border-radius: 3px; 
    background: #FFF; 
    cursor: default; 
    box-shadow: inset 0 0 1px #FFF; 
} 
.noUi-handle:after { 
    content: "Some words here"; /* Add something like this */ 
} 

핸들 텍스트가 슬라이더 값으로 업데이트해야 할 경우, 당신은 같은 슬라이더에 속성으로 값을 설정할 수 있습니다 :

slider.noUiSlider.on('update', function(values, handle) { 
    this.target.setAttribute('data-value' + handle, values[handle]); 
}); 

그리고 그 속성을 사용하여 핸들을 스타일 :

[data-value0="5"] .noUi-handle:after { 
    content: "Text only for value 5"; 
}