Wejście zakresowe (suwak) z oznaczeniami dla punktów pośrednich

Question

Chcę suwaka używającego HTML5 w ten sposób: gdzie mogę wyświetlić wartość. Próbowałem poniższy kod:

<input type=range min=0 max=100 value=50 step=1 list=tickmarks> 
    <datalist id=tickmarks> 
     <option value="0 to 20">0</option> 
     <option>20</option> 
     <option>40</option> 
     <option>60</option> 
     <option>80</option> 
     <option>100</option> 
    </datalist> 

Ale nic nie działa. Dowolny pomysł?

Answer 1

Możesz osiągnąć ten cel, używając poniższego kodu. Co robimy tutaj jest:

• pomocą liniowego gradientem (powtarzając) w celu wygenerowania linii w wymaganych odstępach
• Dodaj tekst za pomocą pseudo-element, a następnie podać wymaganą przestrzeń pomiędzy nimi za pomocą właściwość word-spacing. W przypadku Chrome (przeglądarki Webkit) kontener nie jest wymagany, a skomentowany kod w próbce jest wystarczający sam, ale Firefox wymaga kontenera. Myślę, że zachowanie w FF jest prawidłowa, ponieważ input elementy generalnie nie powinny wspierać pseudo-elementy, a więc lepiej jest zachować opakowanie być przyszłościowe

Punkty do uwaga:

• Ten przykład testuje Chrome (44.0.2376.0 dev-m 42.0.2311.90 m), Firefox (36.0.4), Internet Explorer 11 i Opera 28.
• zakładać, że użycie repeating-linear-gradient lub linear-gradient nie powinno być problemem.

Browser Support:

• Do zakresu wejściowego - Chrome 5+, Firefox 23+, 10+ IE, Safari 3.1 i nowsze, Opera 9+
• za powtarzanie Gradient - Chrome 10+ (prefiks -webkit), Firefox 3.6+ (prefiks -moz), IE 10+, Safari 5.1, Opera 11.6.

input[type='range'] { 
 
    box-sizing: border-box; 
 
    border: 0px solid transparent; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    width: 210px; 
 
    height: 50px; 
 
    cursor: pointer; 
 
    background: -webkit-repeating-linear-gradient(90deg, #777, #777 1px, transparent 1px, transparent 40px) no-repeat 50% 50%; 
 
    background: -moz-repeating-linear-gradient(90deg, #777, #777 1px, transparent 1px, transparent 40px) no-repeat 50% 50%; 
 
    background: repeating-linear-gradient(90deg, #777, #777 1px, transparent 1px, transparent 40px) no-repeat 50% 50%; 
 
    background-size: 122px 25px; 
 
    font-size: 16px; 
 
} 
 
input[type='range'], 
 
input[type='range']::-webkit-slider-runnable-track, 
 
input[type='range']::-webkit-slider-thumb { 
 
    -webkit-appearance: none; 
 
} 
 
input[type='range']::-webkit-slider-runnable-track { 
 
    box-sizing: border-box; 
 
    width: 200px; 
 
    height: 5px; 
 
    border-radius: 2px; 
 
    background: #777; 
 
} 
 
input[type='range']::-moz-range-track { 
 
    box-sizing: border-box; 
 
    width: 200px; 
 
    height: 5px; 
 
    border-radius: 2px; 
 
    padding: 0px; 
 
    background: #777; 
 
} 
 
input[type='range']::-moz-range-thumb { 
 
    box-sizing: border-box; 
 
    padding: 0px; 
 
    height: 20px; 
 
    width: 10px; 
 
    border-radius: 2px; 
 
    border: 1px solid; 
 
    background: #EEE; 
 
} 
 
input[type='range']::-ms-track { 
 
    box-sizing: border-box; 
 
    width: 210px; 
 
    height: 5px; 
 
    border-radius: 2px; 
 
    padding: 0px; 
 
    background: #777; 
 
    color: #777; 
 
} 
 
input[type='range']::-webkit-slider-thumb { 
 
    box-sizing: border-box; 
 
    padding: 0px; 
 
    height: 20px; 
 
    width: 10px; 
 
    border-radius: 2px; 
 
    border: 1px solid; 
 
    margin-top: -8px; 
 
    background: #EEE; 
 
} 
 
input[type='range']::-ms-thumb { 
 
    box-sizing: border-box; 
 
    padding: 0px; 
 
    height: 20px; 
 
    width: 10px; 
 
    border-radius: 2px; 
 
    border: 1px solid; 
 
    background: #EEE; 
 
} 
 
input[type="range"]::-ms-fill-lower { 
 
    background: transparent; 
 
} 
 
input[type='range']:focus { 
 
    outline: none; 
 
} 
 
/*input[type='range']:after{ 
 
    position: absolute; 
 
    content: '20 40 60 80'; 
 
    padding: 25px 4035px; 
 
    word-spacing: 20px; 
 
    left: 0px; 
 
    top: 0px; 
 
}*/ 
 

 
.container:after { 
 
    position: absolute; 
 
    color: #777; 
 
    content: '20 40 60 80'; 
 
    padding: 40px; 
 
    word-spacing: 20px; 
 
    left: 0px; 
 
    top: 0px; 
 
    z-index: -1; 
 
} 
 
.container { 
 
    padding: 0px; 
 
    position: relative; 
 
} 
 

 
/* Just for demo */ 
 

 
output{ 
 
    display: block; 
 
    margin-top: 20px; 
 
    color: #777; 
 
} 
 
output:before{ 
 
    content:"Selected Value: "; 
 
    font-weight: bold; 
 
} 
 
body { 
 
    font-family: Calibri, Arial; 
 
}

<div class="container"> 
 
    <input type="range" min="0" max="100" value="50" step="1" list="tickmarks" id="rangeInput" oninput="output.value = rangeInput.value"> 
 
    <datalist id="tickmarks"> 
 
    <option value="0 to 20">0</option> 
 
    <option>20</option> 
 
    <option>40</option> 
 
    <option>60</option> 
 
    <option>80</option> 
 
    <option>100</option> 
 
    </datalist> 
 
    <output id="output" for="rangeInput">50</output> <!-- Just to display selected value --> 
 
</div>

Demo on Codepen