javascript - 範囲入力のサム内に値を配置する

Question

更新： 以下の解決策。

スライダー ( <input type='range'../>) があり、つまみの内側に値があります。大まかな表現は次のとおりです。

        ______
_______/      \______
|______: [42] :______|
       \______/

問題は、親指がコンテンツをサポートしていないため、値を a に配置し、 javascript を使用し<div><span class='noselect'>[42]</span></div>て計算left: ?pxして、div を移動して親指の上に一致させることです。

この回避策全体はかなりうまく機能します...ただし、テキストは親指用のイベントをキャプチャするため、スライダーは移動せず、代わりにテキストが選択されます。

実際のテキスト選択を防ぐためにcssを追加しました：

.noselect {
    -moz-user-select:-moz-none;
    -moz-user-select:none;
    -o-user-select:none;
    -khtml-user-select:none;  
    -webkit-user-select:none; 
    -ms-user-select:none;
    user-select:none; 
    display: block;
}

しかし、上記の CSS は、マウス イベントがサムではなくテキストによって消費されることを妨げません。

その上で、イベントを親指に転送しようとしました:

$(document).on('click touchstart touchend touchmove', '.noselect', function (event) {
    var slider = $(this).parents('.slider').first();
    if (slider && slider.length > 0) {
        slider.trigger(event.type, event);
        event.stopPropagation();
        return false;
    } 
});

上記の js はテキスト イベントをキャプチャしますが、その下のスライダーでトリガーしようとしても何もしません。

問題は、ユーザーの操作を妨げずにその価値を実現するにはどうすればよいかということです。

親指自体は円のようにスタイルされています。

input[type="range"]:disabled::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #404040;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    background-color: #404040; 
    border: none; 
}

アップデート

以下の受け入れられた回答に基づいて問題を解決しました。CSS は次のようになります。

以下の CSS は、「不透明度」属性が (ほぼ) 0 に設定されていることを除いて、必要な外観のスライダーとつまみを作成します。

input[type=range] {
    -webkit-appearance: none;
    background-color: silver;
    opacity: 0.0;
    stroke-opacity: 0.0;
    height: 26px; 
    border-radius: 0px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #808080;
    width: 54px;
    height: 54px;
    opacity: 0.02;
    stroke-opacity: 1.0;
    border-radius: 26px;
    background-color: #F0F0F0; 
    border: none;
}

これらのスタイルを別の名前 (sliderBackground、sliderThumb) でコピーし、それらを の前に配置された -s に適用しました。

42