更新：解決策範囲のサムの中に値を配置する入力
私にはスライダ（<input type='range'../>）があり、親指の中に値があります。 ここで、粗な表現です：
______
_______/ \______
|______: [42] :______|
\______/
問題は、私は<div><span class='noselect'>[42]</span></div>に価値を置き、親指の上に一致するdiv要素を移動するためにJavaScriptを使用して、いくつかのleft: ?pxを計算していますので、親指がコンテンツをサポートしていないです。
テキスト全体が親指用のイベントをキャプチャすることを除いて、この全体的な回避策はうまくいきます。そのため、スライダは移動せず、代わりにテキストが選択されています。
私は、実際のテキスト選択を防ぐために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;
}
UPDATE
私は下記の受け入れ答えに基づいて問題を解決しました。ここでは、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ためにそれらを適用する：あなたが一番上に入力を配置しようと、それ透明inste作ることができ