テキストと図形のついた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"; 
}