मध्यवर्ती बिंदुओं के लिए चिह्नों के साथ रेंज इनपुट (स्लाइडर)

Question

मुझे एचटीएमएल 5 का उपयोग करके एक स्लाइडर चाहिए: जहां मैं मूल्य प्रदर्शित कर सकता हूं। मैंने नीचे दिए गए कोड की कोशिश की है:

<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> 

लेकिन कुछ भी काम नहीं करता है। कोई उपाय?

Answer 1

आप नीचे दिए गए कोड का उपयोग करके जो चाहते हैं उसे हासिल कर सकते हैं। क्या हम यहाँ कर रहे हैं:

• एक रेखीय-ढाल (दोहरा) का उपयोग आवश्यक अंतराल
• पर लाइनों उत्पन्न करने के लिए पाठ एक छद्म तत्व का उपयोग करें और उसके बाद का उपयोग कर उन दोनों के बीच में अपेक्षित स्थान देने के word-spacing संपत्ति। क्रोम (वेबकिट ब्राउज़र) के लिए कंटेनर की आवश्यकता नहीं है और नमूना में टिप्पणी कोड पर्याप्त अकेला है लेकिन फ़ायरफ़ॉक्स को कंटेनर की आवश्यकता है। मुझे लगता है कि एफएफ में व्यवहार सही क्योंकि input तत्वों आम तौर पर छद्म तत्वों समर्थन की उम्मीद नहीं कर रहे हैं है और इसलिए यह भविष्य सबूत होने के लिए कंटेनर बनाए रखने के लिए बेहतर है नोट करने के लिए

अंक:

• यह नमूना क्रोम (44.0.2376.0 देव-मी, 42.0.2311.90 मीटर), Firefox (36.0.4), Internet Explorer 11 और ओपेरा 28.
• पर परीक्षण किया जाता है मुझे लगता है कि repeating-linear-gradient या linear-gradient के उपयोग एक मुद्दा नहीं होना चाहिए।

ब्राउज़र समर्थन:

• रेंज इनपुट के लिए - क्रोम 5 +, फ़ायरफ़ॉक्स 23+, IE 10+, 3.1+, ऑपेरा 9+
• दोहरा ढाल के लिए - Chrome 10+ (-webkit उपसर्ग), फ़ायरफ़ॉक्स 3.6+ (-मोज़ उपसर्ग), आईई 10+, सफारी 5.1, ओपेरा 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