तो मेरे पास एक रेंज/स्लाइडर है <input type="range">और मुझे इसे इस तरह दिखने के लिए कुछ सीएसएस मिला है: रंग रेंज वाले स्लाइडर का चित्र
मैं अंगूठे को रंग बदलने के लिए स्लाइड के रूप में बदलना चाहता हूं, मुझे जेएस नीचे मिला है कि मैं इसके मूल्य 1-100 के आधार पर रंग प्राप्त कर सकता हूं लेकिन मुझे नहीं पता कि रेंज के अंगूठे तक कैसे पहुंचा जाए। जहां भी मैं देखता हूं मैं सीएसएस के माध्यम से अंगूठे तक पहुंच सकता हूं लेकिन जेएस पर कुछ भी नहीं।

मेरे प्रयास इस तरह के थे:

slider.thumb //undefined
slider.shadowRoot //null
slider.style.webkitSliderThumb // undefined
slider.style.thumb // undefined
slider.childNodes  // []
slider.children // []
0
Frustrated programmer 26 मार्च 2020, 23:14

1 उत्तर

सबसे बढ़िया उत्तर

सबसे अच्छा तरीका यह है कि CSS Variables का उपयोग करके रंग को psuedoselector पर पास किया जाए। मैंने नीचे एक बहुत ही सरल उदाहरण एक साथ रखा है:

const input = document.querySelector( 'input' );

input.addEventListener( 'input', event => {
   
   // This assigns the strength of the color to a CSS variable, which will in turn style the slider.
   input.style.setProperty( '--color', `rgba(${input.value},0,0,1)`);
  
})
:root {
  --color: rgba(0,0,0,1);
}
input[type=range] {
  width: 100%;
  height: 1em;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient( 90deg, black, red );
}
input[type=range]::-webkit-slider-thumb {
  background: var(--color, white);
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  border: 1px solid white;
}
<input type="range" value="1" min="0" max="255" step="1" />

यहां सुरुचिपूर्ण बात यह है कि यह सभी पुराने ब्राउज़रों के साथ भी अच्छी तरह से संगत है, क्योंकि आप उन लोगों के लिए सफेद के डिफ़ॉल्ट को परिभाषित कर सकते हैं जिन्हें आधुनिक ब्राउज़र प्राप्त करने के लिए परेशान नहीं किया जा सका।

और नहीं, JS में छद्म तत्वों की कोई पहुंच नहीं है क्योंकि वे हैं... तकनीकी रूप से नहीं।

2
somethinghere 26 मार्च 2020, 20:49