एचटीएमएल 5 इनपुट टाइप रेंज शो रेंज वैल्यू

Question

मैं एक वेबसाइट बना रहा हूं जहां मैं रेंज स्लाइडर का उपयोग करना चाहता हूं (मुझे पता है कि यह केवल वेबकिट ब्राउज़र का समर्थन करता है)।

मैंने इसे पूरी तरह से एकीकृत किया है और ठीक काम करता है। लेकिन मैं textboxवर्तमान स्लाइड मूल्य दिखाने के लिए एक का उपयोग करना चाहूंगा ।

मेरा मतलब है कि अगर शुरू में स्लाइडर 5 मान पर है, तो पाठ बॉक्स में इसे 5 के रूप में दिखाना चाहिए, जब मैं स्लाइड करता हूं तो पाठ बॉक्स में मूल्य बदलना चाहिए।

क्या मैं यह केवल CSSया का उपयोग करके कर सकता हूं html। मैं बचना चाहता हूं JQuery। क्या यह संभव है?

Comments

आप जावास्क्रिप्ट के बिना ऐसा नहीं कर सकते।

— म्रतशर्मन

आप लगभग इस तरह सीएसएस का उपयोग कर सकते हैं :before/ :after, contentऔर attr(), इस तरह । हालाँकि, छद्म तत्वों के बाद: / से पहले: वास्तव में स्लाइडर की सीमा के कुछ खाते हैं (हालांकि शायद यह ठीक है), और सबसे महत्वपूर्ण बात, मानों को अपडेट नहीं किया जाता है यदि स्लाइडर में हेरफेर किया गया है। फिर भी, मुझे लगा कि इसे यहां छोड़ना दिलचस्प होगा। यह भविष्य में संभव हो सकता है।

— वाल्ड्रियस जूल

@Waldir के समाधान को ठीक करने से परिणाम प्राप्त होता है jsfiddle.net/RjWJ8 हालांकि यह अभी भी जावास्क्रिप्ट का उपयोग करता है संपत्ति से मूल्य विशेषता को अपडेट करने।

— 15:12 पर user1277170

Answer 1

यह जावास्क्रिप्ट का उपयोग करता है, सीधे jquery का नहीं। यह आपको आरंभ करने में मदद कर सकता है।

function updateTextInput(val) {
          document.getElementById('textInput').value=val; 
        }

<input type="range" name="rangeInput" min="0" max="100" onchange="updateTextInput(this.value);">
<input type="text" id="textInput" value="">

Comments

लेकिन वहाँ वैसे भी यह जावास्क्रिप्ट या jquery के बिना करने के लिए है?

— नीरज चौहान

यह mobile-web-app.blogspot.com/2012/03/… , फिर भी जावास्क्रिप्ट है। code<लेबल के लिए = "रेंजिनपुट"> रेंज </ लेबल> <इनपुट आईडी = "रेंजिनपुट" प्रकार = "रेंज" मिनट = "0" अधिकतम = "10" मान = "5" ऑन्चेंज = "रेंजवल्यू.वल्यू = मूल्य"> </ input> <आउटपुट आईडी = "रेंजवैल्यू"> ५ </ आउटपुट>

— एज़लपॉड ४'१२ बजे

क्या किसी और को लगता है कि एक अंधा स्लाइडर प्रदान करने की कमी है। यह सच है कि फैंसी विजेट्स प्रदान करना बुनियादी मानक की भूमिका नहीं है, लेकिन चयनित मूल्य दिखाना इस विजेट के लिए मुख्य है, इसलिए मुझे लगता है कि (वैकल्पिक रूप से) एक मूल रूप में संख्या दिखा रहा है जैसे कि स्लाइडर हैंडल के शीर्ष पर एक टूलटिप। एक बेहतर डिजाइन के लिए बनाते हैं।

— बेसल शीशानी

@BaselShishani अधिक सहमत नहीं हो सकती है, वास्तव में निश्चित नहीं है कि इसके पीछे की विचार प्रक्रिया क्या थी।

— नोज

@BaselShishani: के अनुसार MDN : "सीमा: एक नंबर जिसका सही मूल्य महत्वपूर्ण नहीं है में प्रवेश करने के लिए एक नियंत्रण।"। उस धारणा के प्रकाश में, कोई सटीक मूल्य नहीं दिखाने से समझ में आता है। लेकिन व्यवहार में इसका उपयोग संभवतः सटीक मानों के चयन के लिए भी किया जाएगा।

— बोडो

Answer 2

उन लोगों के लिए जो अभी भी एक अलग जावास्क्रिप्ट कोड के बिना एक समाधान के लिए खोज रहे हैं। एक जावास्क्रिप्ट या jquery फ़ंक्शन लिखने के बिना थोड़ा आसान समाधान है:

<form name="registrationForm">
   <input type="range" name="ageInputName" id="ageInputId" value="24" min="1" max="100" oninput="ageOutputId.value = ageInputId.value">
   <output name="ageOutputName" id="ageOutputId">24</output>
</form>

JsFiddle डेमो

यदि आप टेक्स्ट बॉक्स में मूल्य दिखाना चाहते हैं, तो आउटपुट को इनपुट में बदलें।

---

अपडेट करें:

यह अभी भी जावास्क्रिप्ट है आपके HTML के भीतर लिखा गया है, आप बाइंडिंग को जेएस कोड के साथ बदल सकते हैं:

 document.registrationForm.ageInputId.oninput = function(){
    document.registrationForm.ageOutputId.value = document.registrationForm.ageInputId.value;
 }

या तो एलिमेंट के Id या नाम का उपयोग करें, दोनों morden ब्राउज़रों में समर्थित हैं।

Comments

+1 पता है कि मैं <आउटपुट> के बारे में जानता हूं। केवल समस्या यह है कि ईआई हालांकि इसका समर्थन नहीं करता है। (W3School) w3schools.com/tags/tryit.asp?filename=tryhtml5_output

— radbyx

यह अभी भी जावास्क्रिप्ट है, और इनपुट तत्व की तुलना में फार्म तत्व पर ऑनिनपुट को बांधना बदतर है।

— 20:14

@cuixiping, हम oninput को तत्व के बजाय बांध सकते हैं, मैंने इसे केवल उदाहरण दिखाने के लिए किया था।

— राहुल आर।

इस देर और दोपहर के प्रश्न को क्षमा करें, लेकिन हैंडलर अपने HTML नामों द्वारा रेंजइन्पुट और राशि का उल्लेख कैसे करता है?

— rep_movsd

@rep_movsd, यह इस प्रकार है ।formName.rangeInput या this.formName.amount। उनके नाम का उपयोग करते हुए तत्वों तक पहुंचें। हालाँकि मैं 100% निश्चित नहीं हूँ,

— राहुल आर।

Answer 3

संस्करण संपादन योग्य इनपुट के साथ:

<form>
    <input type="range" name="amountRange" min="0" max="20" value="0" oninput="this.form.amountInput.value=this.value" />
    <input type="number" name="amountInput" min="0" max="20" value="0" oninput="this.form.amountRange.value=this.value" />
</form>

http://jsfiddle.net/Xjxe6/

Comments

एक फॉर्म के बाहर काम करने वाले वर्जन को प्राप्त करने के लिए फॉर्म वेरिएबल्स को बदलें this.nextElementSiblingया this.previousElementSiblingऑनइनचेंज के साथ ऑनिनपुट को बदलें। jsfiddle.net/Xjxe6/94

— डोमिनो

Answer 4

एक बेहतर तरीका यह भी होगा कि इनपुट ईवेंट को पूरे फॉर्म (प्रदर्शन वार) के बजाय इनपुट पर ही पकड़ा जाए:

<input type="range" id="rangeInput" name="rangeInput" min="0" max="20" value="0"
       oninput="amount.value=rangeInput.value">                                                       

<output id="amount" name="amount" for="rangeInput">0</output>

यहाँ एक पहेली है ( idरयान की टिप्पणी के अनुसार जोड़ा गया)।

Comments

फ़ायरफ़ॉक्स 27 में, यह मेरे लिए तब तक काम नहीं आया जब तक कि मैंने id="amount"आउटपुट के लिए नहीं जोड़ा ।

— रयान

यह आईडी के बिना काम करना चाहिए:oninput="this.form.amount.value=this.value"

— d1Mm

यह काम करता है, लेकिन पृष्ठ को ताज़ा करने पर मुझे वर्तमान मूल्य कैसे मिलता है और इसे कैसे दिखाऊं? : - /

— user2513846 20

Answer 5

यदि आप चाहते हैं कि आपका वर्तमान मूल्य स्लाइडर के नीचे प्रदर्शित हो और उसके साथ आगे बढ़ें, तो यह प्रयास करें:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>MySliderValue</title>

</head>
<body>
  <h1>MySliderValue</h1>

  <div style="position:relative; margin:auto; width:90%">
    <span style="position:absolute; color:red; border:1px solid blue; min-width:100px;">
    <span id="myValue"></span>
    </span>
    <input type="range" id="myRange" max="1000" min="0" style="width:80%"> 
  </div>

  <script type="text/javascript" charset="utf-8">
var myRange = document.querySelector('#myRange');
var myValue = document.querySelector('#myValue');
var myUnits = 'myUnits';
var off = myRange.offsetWidth / (parseInt(myRange.max) - parseInt(myRange.min));
var px =  ((myRange.valueAsNumber - parseInt(myRange.min)) * off) - (myValue.offsetParent.offsetWidth / 2);

  myValue.parentElement.style.left = px + 'px';
  myValue.parentElement.style.top = myRange.offsetHeight + 'px';
  myValue.innerHTML = myRange.value + ' ' + myUnits;

  myRange.oninput =function(){
    let px = ((myRange.valueAsNumber - parseInt(myRange.min)) * off) - (myValue.offsetWidth / 2);
    myValue.innerHTML = myRange.value + ' ' + myUnits;
    myValue.parentElement.style.left = px + 'px';
  };
  </script>

</body>
</html>

ध्यान दें कि इस प्रकार के HTML इनपुट तत्व में एक छिपी हुई विशेषता है, जैसे कि आप स्लाइडर को बाएँ / दाएँ / नीचे / ऊपर तीर कुंजियों के साथ स्थानांतरित कर सकते हैं जब तत्व का उस पर ध्यान केंद्रित होता है। होम / एंड / पेजडाउन / पेजअप कीज के साथ भी ऐसा ही है।

Answer 6

यदि आप कई स्लाइड का उपयोग कर रहे हैं , और आप jQuery का उपयोग कर सकते हैं, तो आप आसानी से कई स्लाइडर्स से निपटने के लिए अनुसरण कर सकते हैं:

function updateRangeInput(elem) {
  $(elem).next().val($(elem).val());
}

input { padding: 8px; border: 1px solid #ddd; color: #555; display: block; }
input[type=text] { width: 100px; }
input[type=range] { width: 400px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="range" min="0" max="100" oninput="updateRangeInput(this)" value="0">
<input type="text" value="0">

<input type="range" min="0" max="100" oninput="updateRangeInput(this)" value="50">
<input type="text" value="50">

इसके अलावा, का उपयोग करके oninputपर <input type='range'>आप जबकि सीमा खींच घटनाओं प्राप्त करेंगे।

Answer 7

बिना सबसे छोटा संस्करण form, minया बाहरी जावास्क्रिप्ट।

<input type="range" value="0" max="10" oninput="num.value = this.value">
<output id="num">0</output>

Comments

यह सबसे अच्छा जवाब है ...

— Ayo Adesina

Answer 8

लोगों को jquery के उपयोग के बारे में परवाह नहीं है, यहाँ किसी भी आईडी का उपयोग किए बिना एक छोटा तरीका है

<label> userAvatar :
  <input type="range" name="userAvatar" min="1" max="100" value="1"
         onchange="$('~ output', this).val(value)" 
         oninput="$('~ output', this).val(value)">
  <output>1</output>
</label>

Answer 9

मेरे पास एक समाधान है जिसमें (वेनिला) जावास्क्रिप्ट शामिल है, लेकिन केवल एक पुस्तकालय के रूप में। आप इसे एक बार शामिल करने के लिए तैयार करते हैं और फिर आपको केवल उपयुक्त सेट करने की आवश्यकता होती हैsource केवल संख्या इनपुट विशेषता ।

sourceविशेषता किया जाना चाहिएquerySelectorAll रेंज इनपुट आप सुनना चाहते हैं के चयनकर्ता।

यह भी selectcs के साथ काम करता है। और यह कई श्रोताओं के साथ काम करता है। और यह दूसरी दिशा में काम करता है: नंबर इनपुट बदलें और रेंज इनपुट समायोजित करेगा। और यह पेज पर बाद में जोड़े गए तत्वों पर काम करेगा ( https://codepen.io/HerrSerker/pen/JzaVQg देखें) )

क्रोम, फ़ायरफ़ॉक्स, एज और IE11 में परीक्षण किया गया

;(function(){
  
  function emit(target, name) {
    var event
    if (document.createEvent) {
      event = document.createEvent("HTMLEvents");
      event.initEvent(name, true, true);
    } else {
      event = document.createEventObject();
      event.eventType = name;
    }

    event.eventName = name;

    if (document.createEvent) {
      target.dispatchEvent(event);
    } else {
      target.fireEvent("on" + event.eventType, event);
    }    
  }

  var outputsSelector = "input[type=number][source],select[source]";
  
  function onChange(e) {
    var outputs = document.querySelectorAll(outputsSelector)
    for (var index = 0; index < outputs.length; index++) {
      var item = outputs[index]
      var source = document.querySelector(item.getAttribute('source'));
      if (source) {
        if (item === e.target) {
          source.value = item.value
          emit(source, 'input')
          emit(source, 'change')
        }

        if (source === e.target) {
          item.value = source.value
        }
      }
    }
  }
  
  document.addEventListener('change', onChange)
  document.addEventListener('input', onChange)
}());

<div id="div">
  <input name="example" type="range" max="2250000" min="-200000" value="0" step="50000">
  <input id="example-value" type="number" max="2250000" min="-200000" value="0" step="50000" source="[name=example]">
  <br>

  <input name="example2" type="range" max="2240000" min="-160000" value="0" step="50000">
  <input type="number" max="2240000" min="-160000" value="0" step="50000" source="[name=example2]">
  <input type="number" max="2240000" min="-160000" value="0" step="50000" source="[name=example2]">
  <br>
  
  <input name="example3" type="range" max="20" min="0" value="10" step="1">
  <select source="[name=example3]">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
  </select>
  <br>
  
</div>
<br>

Answer 10

<form name="registrationForm">
    <input type="range" name="ageInputName" id="ageInputId" value="24" min="1" max="10" onchange="getvalor(this.value);" oninput="ageOutputId.value = ageInputId.value">
    <input type="text" name="ageOutputName" id="ageOutputId"></input>
</form>

Comments

त्रुटि: { "message": "Uncaught ReferenceError: getvalor परिभाषित किया गया है नहीं", "फ़ाइल नाम": " stacksnippets.net/js ", "lineno": 12, "colno": 169}

— Darush

Answer 11

इसे इस्तेमाल करे :

 <input min="0" max="100" id="when_change_range" type="range">
 <input type="text" id="text_for_show_range">

और jQuery अनुभाग में:

 $('#when_change_range').change(function(){
 document.getElementById('text_for_show_range').value=$(this).val();
  });

Answer 12

यदि आप अभी भी उत्तर की तलाश में हैं, तो आप इनपुट प्रकार = "संख्या" का उपयोग प्रकार के स्थान पर कर सकते हैं = "श्रेणी" न्यूनतम अधिकतम कार्य यदि यह उस क्रम में सेट किया गया है:
1-नाम
2-अधिकतम
3-आकार
4-मिनट
5-अधिकतम
बस इसे कॉपी करें

<input  name="X" maxlength="3" size="2" min="1" max="100" type="number" />

Comments

यह सिर्फ गलत है, यह वह नहीं करता है जो विषय स्टार्टर ने अनुरोध किया था।

— बोलव