स्लाइडर से पहले और बाद में अलग-अलग रंग रखने के लिए एचटीएमएल 5 रेंज इनपुट कैसे स्टाइल करें?
मैं चाहता हूं कि बायां पक्ष हरा हो और दाहिने तरफ ग्रे हो। जैसा ऊपर चित्रित किया गया है वह सही होगा। अधिमानतः एक शुद्ध सीएसएस समाधान (केवल वेबकिट के बारे में चिंता करने की आवश्यकता है)।
ऐसी चीज संभव है?
हां, यह संभव है। हालांकि मैं इसकी अनुशंसा नहीं करता क्योंकि input range वास्तव में सभी ब्राउज़रों द्वारा सही ढंग से समर्थित नहीं है क्योंकि एचटीएमएल 5 और एचटीएमएल 5 में जोड़ा गया एक नया तत्व केवल एक मसौदा है (और लंबे समय तक होगा) इसलिए इसे स्टाइल करने के लिए शायद यह नहीं है सर्वोत्तम पसंद।
इसके अलावा, आपको कुछ जावास्क्रिप्ट भी चाहिए। सादगी के उद्देश्यों के लिए मैंने jQuery लाइब्रेरी का उपयोग करने की स्वतंत्रता ली।
यहां आप जाएं: http://jsfiddle.net/JnrvG/1/।
यह सवाल नहीं था, मुझे सीएसएस द्वारा इसे करने की क्या ज़रूरत है, वहां केवल सीएसएस के साथ एक तरीका बनना है। – Ipad
आप जेएस के बिना क्रोम में काम कर सकते हैं (http://jsfiddle.net/1xg1j3tw/)। IE10 + के लिए आप -ms-fill-lower और -ms-fill-upper छद्म तत्वों का उपयोग कर सकते हैं। – Ales
@ एल्स आपको इसे एक अतिरिक्त उत्तर में रखना चाहिए। –
अब यह वेबकिट, फ़ायरफ़ॉक्स और आईई में प्रत्येक छद्म तत्वों के साथ समर्थित है। लेकिन, ज़ाहिर है, यह प्रत्येक में अलग है। : (
this question देखें के जवाब और/या एक CodePen कुछ समाधान के लिए prettify <input type=range> #101 शीर्षक के लिए खोज
लिए एक छोटा सा अद्यतन इस एक:।
यदि आप निम्न का उपयोग यह मक्खी पर अद्यतन करेगा बल्कि माउस रिलीज पर से।
"परिवर्तन MouseMove", समारोह "
<script>
$('input[type="range"]').on("change mousemove", function() {
var val = ($(this).val() - $(this).attr('min'))/($(this).attr('max') - $(this).attr('min'));
$(this).css('background-image',
'-webkit-gradient(linear, left top, right top, '
+ 'color-stop(' + val + ', #2f466b), '
+ 'color-stop(' + val + ', #d3d3db)'
+ ')'
);
});</script>
शुद्ध सीएसएस समाधान:
input[range] से अतिप्रवाह छुपाएं, और सभी अंतरिक्ष छाया रंग के साथ अंगूठे के लिए छोड़ दिया भरें।::-ms-fill-lower::-moz-range-progress/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
input[type='range'] {
overflow: hidden;
width: 80px;
-webkit-appearance: none;
background-color: #9a905d;
}
input[type='range']::-webkit-slider-runnable-track {
height: 10px;
-webkit-appearance: none;
color: #13bba4;
margin-top: -1px;
}
input[type='range']::-webkit-slider-thumb {
width: 10px;
-webkit-appearance: none;
height: 10px;
cursor: ew-resize;
background: #434343;
box-shadow: -80px 0 0 80px #43e5f7;
}
}
/** FF*/
input[type="range"]::-moz-range-progress {
background-color: #43e5f7;
}
input[type="range"]::-moz-range-track {
background-color: #9a905d;
}
/* IE*/
input[type="range"]::-ms-fill-lower {
background-color: #43e5f7;
}
input[type="range"]::-ms-fill-upper {
background-color: #9a905d;
}<input type="range"/>हाय deathangel908, अच्छा समाधान। मैं बस बॉक्स छाया भाग में सुधार करूंगा: बॉक्स-छाया: -80 पीएक्स 0 0 पीएक्स 80 पीएक्स # 43e5f7; – user1351452
क्रोम में इसके साथ समस्या यह है कि यदि आप अंगूठे को ट्रैक से बड़ा करना चाहते हैं, तो बॉक्स छाया ट्रैक को ओवरलैप करती है अंगूठे की ऊंचाई। क्या ट्रैक के अंदर बॉक्स-छाया को सीमित करने का कोई तरीका है? – mharris7190
यह प्रतिशत आधारित चौड़ाई वाले इनपुट के लिए काम नहीं करता है। किसी के पास इसके लिए कोई कामकाज है? –
पिछले स्वीकार किए जाते हैं समाधान है अब काम नहीं कर रहा है।
मैंने एक साधारण फ़ंक्शन कोडिंग को समाप्त कर दिया जो range को एक स्टाइल कंटेनर में लपेटता है जो कर्सर से पहले आवश्यक बार जोड़ता है। मैंने this example लिखा जहां सीएसएस में दो रंग 'नीले' और 'नारंगी' सेट को देखना आसान है, इसलिए उन्हें जल्दी से संशोधित किया जा सकता है।
input type="range" min="0" max="50" value="0" style="margin-left: 6%;width: 88%;background-color: whitesmoke;"
ऊपर कोड में परिवर्तन लेकर इनपुट शैली .....
शायद, तुम क्या करने की कोशिश की है? अपना कोड यहां पोस्ट करें। – j08691