CSSの入力範囲を作る方法は最初に表示されません

Question

私は食中毒の調査をしていますが、range inputからhttps://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/のような入力範囲が必要です。

私の質問は：少なくとも1回はクリックされるまで、親指部分が表示されないようにするにはどうすればいいですか？これは、データがそこにあることによって影響を受けないように、調査にとって重要です。ここで

は（あなたは上記のリンクで残りの部分を見ることができる）親指のCSSです：

/* Special styling for WebKit/Blink */ 
    input[type=range]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    border: 1px solid #000000; 
    height: 36px; 
    width: 16px; 
    border-radius: 3px; 
    background: #ffffff; 
    cursor: pointer; 
    margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ 
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */ 
} 

/* All the same stuff for Firefox */ 
input[type=range]::-moz-range-thumb { 
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
    border: 1px solid #000000; 
    height: 36px; 
    width: 16px; 
    border-radius: 3px; 
    background: #ffffff; 
    cursor: pointer; 
} 

/* All the same stuff for IE */ 
input[type=range]::-ms-thumb { 
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
    border: 1px solid #000000; 
    height: 36px; 
    width: 16px; 
    border-radius: 3px; 
    background: #ffffff; 
    cursor: pointer; 
} 

Answer 1

このfiddleはクロームで動作するため、トラックのスタイルを追加する必要がありました。範囲をクリックするまで親が隠され、クリックされた場所に表示されます。これはjQueryを使用しており、私はクロームに適用されたものだけを扱っていました。

HTML：

<input type="range" class='not-clicked'> 

Javascriptを：

$('.not-clicked').click(function(e){ 
    $(this).removeClass('not-clicked'); 
    $(this).addClass('clicked'); 
}); 

CSS：

.not-clicked::-webkit-slider-thumb{ 
    display:none; 
} 
.clicked::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    border: 1px solid #000000; 
    height: 36px; 
    width: 16px; 
    border-radius: 3px; 
    background: #ffffff; 
    cursor: pointer; 
    margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ 
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */ 
} 

Answer 2

あなたはあなたの一部にJavascriptを追加することができます。 IDでサムパーツを選択し、読み込みページで非表示にします。次に、クリックリスナーを追加し、親指がまだ表示されていない場合は、それを表示します。

var hidden = true; 
var thumb = document.getElementsById("thumb"); 
thumb.hide(); 
var bt = document.getElementsById("validate"); 
bt.on("click",function(){...}); 
//etc 

テストされていません。あなたがもっと欲しいなら、フィドルを提供してください。