स्लाइडर से पहले और बाद में अलग-अलग रंग के लिए एचटीएमएल 5 रेंज इनपुट कैसे स्टाइल करें?

Question

मैं चाहता हूं कि बाईं ओर का हिस्सा हरा हो और दाईं ओर ग्रे हो। जैसा कि ऊपर चित्रित है, सही होगा। अधिमानतः एक शुद्ध सीएसएस समाधान (केवल WebKit के बारे में चिंता करने की आवश्यकता है)।

क्या ऐसा करना संभव है?

Comments

शायद, आपने क्या कोशिश की है? यहां अपना कोड पोस्ट करें।

— j08691

यहाँ आप जाएँ: codepen.io/vsync/pen/mdEJMLv?editors=1100

— vsync

बहुत ही उपयोगी प्रश्न।

— सौरव कुमार

Answer 1

शुद्ध सीएसएस समाधान:

• क्रोम: ओवरफ्लो को छिपाएं input[range], और छाया रंग के साथ अंगूठे पर छोड़ दिया गया सभी स्थान भरें।
• IE: पहिया को मजबूत करने की कोई जरूरत नहीं:::-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"/>

Comments

हाय deathangel908, अच्छा समाधान। मैं सिर्फ बॉक्स शैडो भाग में सुधार करूंगा: बॉक्स-शैडो: -80px 0 0px 80px # 43e5f7;

— फिलिप विटकोवस्की

क्रोम में इसके साथ समस्या यह है कि यदि आप चाहते हैं कि अंगूठे ट्रैक से बड़ा हो, तो बॉक्स छाया अंगूठे की ऊंचाई के साथ ट्रैक को ओवरलैप करता है। क्या ट्रैक के अंदर बॉक्स-छाया को सीमित करने का एक तरीका है?

— mharris7190

यह प्रतिशत आधारित चौड़ाई वाले इनपुट के लिए काम नहीं करता है। किसी को भी उसके लिए एक समाधान है?

— रेमी स्टीयर

एक वर्किंग सीएसएस / जेएस संस्करण यहां पाया जा सकता है: jsfiddle.net/remisture/esyvws3d

— रेमी स्ट्यूर

@ पश्चिमोत्तर वाह, यह भयानक है। अद्यतन के लिए धन्यवाद!

— कोडएफएक्सएक्स

Answer 2

जबकि स्वीकृत उत्तर सिद्धांत में अच्छा है, यह इस तथ्य की अनदेखी करता है कि अंगूठा फिर से काटे बिना ट्रैक के आकार से बड़ा नहीं हो सकता है overflow: hidden। जेएस के एक छोटे से हिस्से के साथ इसे कैसे संभालना है, इसका उदाहरण देखें।

// .chrome styling Vanilla JS

document.getElementById("myinput").oninput = function() {
  var value = (this.value-this.min)/(this.max-this.min)*100
  this.style.background = 'linear-gradient(to right, #82CFD0 0%, #82CFD0 ' + value + '%, #fff ' + value + '%, white 100%)'
};

#myinput {
  background: linear-gradient(to right, #82CFD0 0%, #82CFD0 50%, #fff 50%, #fff 100%);
  border: solid 1px #82CFD0;
  border-radius: 8px;
  height: 7px;
  width: 356px;
  outline: none;
  transition: background 450ms ease-in;
  -webkit-appearance: none;
}

<div class="chrome">
  <input id="myinput" min="0" max="60" type="range" value="30" />
</div>

Comments

क्या आप मुझे सुझाव दे सकते हैं जब मैंने HTML में अधिकतम = 5 जोड़ा है तो रंग ठीक से नहीं भरेगा

— हुस्ना

@ हुस्ना मैंने इस उत्तर को अधिकतम अधिकतम विशेषताओं को संभालने के लिए बढ़ाया है, आशा है कि यह मदद करता है।

— htmn

@ हस्ना आपको अपने अधिकतम और न्यूनतम मूल्य के बीच के अंतर के रूप में% की गणना करनी होगी। उदाहरण के लिए, यदि आपके पास न्यूनतम: 0 और अधिकतम: 10 है, तो आपको जेएस में उपयोग करना चाहिए :,+ this.value / (10-0)*100 +'%, #fff

— रोसारियो रूसो

@ रोसारियो रुसो आपको बस इस बात को दोहराने की जरूरत है। जेएस के साथ(this.value-this.min)/(this.max-this.min)*100

— सिलवान

@ dargue3 आपको सिल्वन्स इनपुट के साथ अपना उत्तर अपडेट करना चाहिए

— तोस्कान

Answer 3

हाँ यह संभव है। हालाँकि मैं इसकी अनुशंसा नहीं करूंगा क्योंकि input rangeसभी ब्राउज़रों द्वारा वास्तव में ठीक से समर्थन नहीं किया गया है क्योंकि HTML5 में एक नया तत्व जोड़ा गया है और एचटीएमएल 5 केवल एक मसौदा है (और लंबे समय तक रहेगा) जहां तक ​​इसे स्टाइल करने की बात है तो शायद यह सबसे अच्छा नहीं है चुनाव।

इसके अलावा, आपको जावास्क्रिप्ट की भी थोड़ी आवश्यकता होगी। मैंने सरलता के उद्देश्य से इसके लिए jQuery लाइब्रेरी का उपयोग करने की स्वतंत्रता ली ।

ये रहा: http://jsfiddle.net/JnrvG/1/ ।

Comments

यह सवाल नहीं था कि आईयू को सीएसएस द्वारा क्या करने की आवश्यकता है, वहाँ केवल सीएसएस के साथ एक रास्ता हो सकता है।

— आईपैड

आप इसे बिना JS ( jsfiddle.net/1xg1j3tw ) के क्रोम में काम कर सकते हैं । IE10 + के लिए आप -ms-fill-lower और -ms-fill-ऊपरी छद्म तत्वों का उपयोग कर सकते हैं।

— एल्स

@ एल्स आपको एक अतिरिक्त उत्तर में रखना चाहिए।

— लुका स्टीब जूल

बदलें .change(करने के लिए on('input', func..इतना पृष्ठभूमि परिवर्तन होगा उपयोगकर्ता अंगूठे न सिर्फ माउस ऊपर ले जाता है जब।

— यामी ओडिमेल

Answer 4

यह एक छोटा सा अद्यतन:

यदि आप निम्नलिखित का उपयोग करते हैं तो यह माउस रिलीज के बजाय मक्खी पर अपडेट होगा।

"चेंज मोसमोव", फंक्शन "

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

Answer 5

@ Dargue3 के उत्तर के शीर्ष पर बिल्डिंग , यदि आप चाहते हैं कि अंगूठा ट्रैक से बड़ा हो, तो आप पूरी तरह से <input type="range" />तत्व का लाभ उठाना चाहते हैं और क्रॉस ब्राउज़र जाना चाहते हैं, आपको JS & CSS की थोड़ी अतिरिक्त लाइनों की आवश्यकता है।

क्रोम / मोज़िला पर आप उपयोग कर सकते हैं linear-gradientतकनीक है, लेकिन आप के आधार पर अनुपात समायोजित करने की आवश्यकता min, max, valueविशेषताओं का उल्लेख किया यहाँ से @Attila ओ । आपको यह सुनिश्चित करने की आवश्यकता है कि आप इसे एज पर लागू नहीं कर रहे हैं, अन्यथा अंगूठा प्रदर्शित नहीं होता है। @Geoffrey Lalloué यहां और अधिक विस्तार से बताते हैं ।

एक और बात ध्यान देने योग्य है, वह यह है कि आपको rangeEl.style.height = "20px";IE / पुराने पर समायोजित करने की आवश्यकता है । सीधे शब्दों में कहें क्योंकि इस मामले में "ऊंचाई ट्रैक पर लागू नहीं होती है, बल्कि अंगूठे सहित पूरे इनपुट पर होती है"। बेला

/**
 * Sniffs for Older Edge or IE,
 * more info here:
 * https://stackoverflow.com/q/31721250/3528132
 */
function isOlderEdgeOrIE() {
  return (
    window.navigator.userAgent.indexOf("MSIE ") > -1 ||
    !!navigator.userAgent.match(/Trident.*rv\:11\./) ||
    window.navigator.userAgent.indexOf("Edge") > -1
  );
}

function valueTotalRatio(value, min, max) {
  return ((value - min) / (max - min)).toFixed(2);
}

function getLinearGradientCSS(ratio, leftColor, rightColor) {
  return [
    '-webkit-gradient(',
    'linear, ',
    'left top, ',
    'right top, ',
    'color-stop(' + ratio + ', ' + leftColor + '), ',
    'color-stop(' + ratio + ', ' + rightColor + ')',
    ')'
  ].join('');
}

function updateRangeEl(rangeEl) {
  var ratio = valueTotalRatio(rangeEl.value, rangeEl.min, rangeEl.max);

  rangeEl.style.backgroundImage = getLinearGradientCSS(ratio, '#919e4b', '#c5c5c5');
}

function initRangeEl() {
  var rangeEl = document.querySelector('input[type=range]');
  var textEl = document.querySelector('input[type=text]');

  /**
   * IE/Older Edge FIX
   * On IE/Older Edge the height of the <input type="range" />
   * is the whole element as oposed to Chrome/Moz
   * where the height is applied to the track.
   *
   */
  if (isOlderEdgeOrIE()) {
    rangeEl.style.height = "20px";
    // IE 11/10 fires change instead of input
    // https://stackoverflow.com/a/50887531/3528132
    rangeEl.addEventListener("change", function(e) {
      textEl.value = e.target.value;
    });
    rangeEl.addEventListener("input", function(e) {
      textEl.value = e.target.value;
    });
  } else {
    updateRangeEl(rangeEl);
    rangeEl.addEventListener("input", function(e) {
      updateRangeEl(e.target);
      textEl.value = e.target.value;
    });
  }
}

initRangeEl();

input[type="range"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 300px;
  height: 5px;
  padding: 0;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}


/*Chrome thumb*/

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-border-radius: 5px;
  /*16x16px adjusted to be same as 14x14px on moz*/
  height: 16px;
  width: 16px;
  border-radius: 5px;
  background: #e7e7e7;
  border: 1px solid #c5c5c5;
}


/*Mozilla thumb*/

input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  -moz-border-radius: 5px;
  height: 14px;
  width: 14px;
  border-radius: 5px;
  background: #e7e7e7;
  border: 1px solid #c5c5c5;
}


/*IE & Edge input*/

input[type=range]::-ms-track {
  width: 300px;
  height: 6px;
  /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
  background: transparent;
  /*leave room for the larger thumb to overflow with a transparent border */
  border-color: transparent;
  border-width: 2px 0;
  /*remove default tick marks*/
  color: transparent;
}


/*IE & Edge thumb*/

input[type=range]::-ms-thumb {
  height: 14px;
  width: 14px;
  border-radius: 5px;
  background: #e7e7e7;
  border: 1px solid #c5c5c5;
}


/*IE & Edge left side*/

input[type=range]::-ms-fill-lower {
  background: #919e4b;
  border-radius: 2px;
}


/*IE & Edge right side*/

input[type=range]::-ms-fill-upper {
  background: #c5c5c5;
  border-radius: 2px;
}


/*IE disable tooltip*/

input[type=range]::-ms-tooltip {
  display: none;
}

input[type="text"] {
  border: none;
}

<input type="range" value="80" min="10" max="100" step="1" />
<input type="text" value="80" size="3" />

Answer 6

पिछला स्वीकृत समाधान अब काम नहीं कर रहा है ।

मैंने एक साधारण फंक्शन की कोडिंग की, जो rangeएक स्टाइल कंटेनर में लपेटता है, जो बार को कर्सर से पहले आवश्यक होता है। मैंने इस उदाहरण को लिखा है जहां सीएसएस में दो रंगों 'ब्लू' और 'ऑरेंज' को देखना आसान है, इसलिए उन्हें जल्दी से संशोधित किया जा सकता है।

Answer 7

यदि आप पहले उत्तर का उपयोग करते हैं , तो अंगूठे के साथ समस्या है। क्रोम में यदि आप चाहते हैं कि अंगूठा ट्रैक से बड़ा हो , तो बॉक्स छाया अंगूठे की ऊंचाई के साथ ट्रैक को ओवरलैप करता है।

बस इन सभी उत्तरों को संक्षिप्त करें और सामान्य रूप से काम कर रहे स्लाइडर को बड़े स्लाइडर अंगूठे के साथ लिखें: jsfiddle

const slider = document.getElementById("myinput")
const min = slider.min
const max = slider.max
const value = slider.value

slider.style.background = `linear-gradient(to right, red 0%, red ${(value-min)/(max-min)*100}%, #DEE2E6 ${(value-min)/(max-min)*100}%, #DEE2E6 100%)`

slider.oninput = function() {
  this.style.background = `linear-gradient(to right, red 0%, red ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 100%)`
};

#myinput {
  border-radius: 8px;
  height: 4px;
  width: 150px;
  outline: none;
  -webkit-appearance: none;
}

input[type='range']::-webkit-slider-thumb {
  width: 6px;
  -webkit-appearance: none;
  height: 12px;
  background: black;
  border-radius: 2px;
}

<div class="chrome">
  <input id="myinput" type="range" min="0" value="25" max="200" />
</div>

Comments

यह मेरे लिए नियंत्रण बटन में रंग जोड़ने के रूप में काम करता है। धन्यवाद

— फ्रैंक

Answer 8

यह अब WebKit, Firefox और IE में से प्रत्येक में छद्म तत्वों के साथ समर्थित है। लेकिन, ज़ाहिर है, यह हर एक में अलग है। : (

इस प्रश्न के उत्तर देखें और / या prettify <input type=range> #101कुछ समाधानों के लिए एक कोडपेन शीर्षक खोजें ।

Answer 9

input type="range" min="0" max="50" value="0"  style="margin-left: 6%;width: 88%;background-color: whitesmoke;"

उपरोक्त कोड परिवर्तन रेंज इनपुट शैली .....

Comments

फायरफॉक्स 57 में काम करता है, लेकिन ओपेरा 49 नहीं और न ही सफारी 11 - बदतर, कुछ भी अग्रभूमि-रंग का समर्थन नहीं करता है।

— डेवोन