カスタム入力範囲スライダの作成方法

Question

画像に示すようなカスタムスライダを作成したいと思います。これどうやってするの？すでに試したことが分かるように、私がリンクしているバイブルを見てください。

<h2>working slider input range</h2> 
 
<input class="slider-info" name="gdskill[1]" id="gdskill1" type="range" min="0" value="0" max="10" step="1" list="ticks" oninput="Output1.value = gdskill1.value" /> 
 
<output id="Output1">0</output> 
 

 

 
<input name="gdskill[2]" id="gdskill2" type="range" min="0" value="0" max="10" step="1" list="ticks" oninput="Output2.value = gdskill2.value" /> 
 
<output id="Output2">0</output> 
 

 
<datalist id="ticks"> 
 
    <option>0</option> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>4</option> 
 
    <option>5</option> 
 
    <option>6</option> 
 
    <option>7</option> 
 
    <option>8</option> 
 
    <option>9</option> 
 
    <option>10</option> 
 
</datalist> 
 

 

 
<h2>I want a design like the one shown in the image above. Is this possible? Can anyone help me with it as I am a little new to CSS.</h2>

フィドルリンク：https://jsfiddle.net/9qgx71kd/2/

Answer 1

私はあなたがIEとFirefoxを越えてテストしたいと思いますが、ここでは私が短期間で行うことができる最高です。これはおそらくいくつかの微調整を必要としますが、良いスタートでなければなりません。

https://jsfiddle.net/9qgx71kd/3/

**** **** HTML

<input name="gdskill[1]" id="gdskill1" type="range" min="0" value="0" max="10" step="1" list="ticks" oninput="Output1.value = gdskill1.value" /><br /> 
<output id="Output1" class="output">0</output> 

<div> 
<input name="gdskill[2]" id="gdskill2" type="range" min="0" value="0" max="10" step="1" list="ticks" oninput="Output2.value = gdskill2.value" /><br /> 
<output id="Output2" class="output">0</output> 
</div> 

<datalist id="ticks"> 
    <option>0</option> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
    <option>6</option> 
    <option>7</option> 
    <option>8</option> 
    <option>9</option> 
    <option>10</option> 
</datalist> 

**** **** CSS

.output { 
    width: 100%; 
    margin-left: 50%; 
} 

input[type=range] { 
    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ 
    height:5px; 
    width:100%; 
    cursor: pointer; 
    background: #07C; 
    margin-bottom: 10px; 
} 

input[type=range]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    border: 2px solid #07C; 
    height: 20px; 
    width: 20px; 
    border-radius: 20px; 
    background: #fff; 
    cursor: pointer; 
    margin-top: 0px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ 
} 

input[type=range]:focus { 
    outline: none; 
} 

あなたはに影を追加したい場合サムスライダにinput[type=range]::-webkit-slider-thumbブロックにbox-shadow: 1px 1px 3px rgba(0, 0, 0, .5);を追加することができます

Answer 2

あなたは、例えば、JCFのための簡単なスタイリング要素と入力要素を交換するJavaScriptライブラリを使用することができます。それらを参照してくださいdemo page.