এইচটিএমএল 5 ইনপুট ধরণের রেঞ্জ শো রেঞ্জের মান

Question

আমি এমন একটি ওয়েবসাইট তৈরি করছি যেখানে আমি রেঞ্জ স্লাইডারটি ব্যবহার করতে চাই (আমি জানি এটি কেবল ওয়েবকিট ব্রাউজারগুলিকে সমর্থন করে)।

আমি এটি পুরোপুরি সংহত করেছি এবং সূক্ষ্মভাবে কাজ করে। তবে আমি textboxবর্তমান স্লাইড মানটি দেখানোর জন্য একটি ব্যবহার করতে চাই ।

আমি বলতে চাইছি যদি প্রাথমিকভাবে স্লাইডারটির মান 5 হয় তবে পাঠ্য বাক্সে এটি 5 হিসাবে প্রদর্শিত হবে, যখন আমি পাঠ্য বাক্সের মান স্লাইড করি।

আমি কেবল CSSবা ব্যবহার করে এটি করতে পারি html। আমি এড়াতে চান JQuery। এটা কি সম্ভব?

Comments

আপনি জাভাস্ক্রিপ্ট ছাড়া এটি করতে পারবেন না।

— mrtsherman

আপনি করতে পারেন প্রায় ব্যবহার CSS সঙ্গে এই কাজ :before/ :after, contentএবং attr()মত, এই । তবে, পূর্বে /: সিউডো-উপাদানগুলি পরে স্লাইডারের কিছু পরিসীমা খেয়ে ফেলে (যদিও এটি সম্ভবত স্থিরযোগ্য), এবং সর্বাধিক গুরুত্বপূর্ণভাবে, স্লাইডারটি হেরফের করা হলে মানগুলি আপডেট হয় না updated তবুও, আমি ভেবেছিলাম এটি এখানে রেখে দেওয়া আকর্ষণীয় হবে। ভবিষ্যতে এটি সম্ভব হয়ে উঠতে পারে।

— ওয়াল্ডরিয়াস

@Wddir এর সমাধানের ফলাফল jsfiddle.net/RjWJ8 এ ফলস্বরূপ এটি এখনও সম্পত্তি থেকে মান বৈশিষ্ট্য আপডেট করার জন্য জাভাস্ক্রিপ্ট ব্যবহার করে।

— ব্যবহারকারী 1277170

Answer 1

এটি সরাসরি জাভাস্ক্রিপ্ট নয়, জাভাস্ক্রিপ্ট ব্যবহার করে। এটি আপনাকে শুরু করতে সহায়তা করতে পারে।

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 ছাড়াই এটি করার কি আছে?

— নিরাজ চৌহান

এটি মোবাইল-web-app.blogspot.com/2012/03/… , এখনও জাভাস্ক্রিপ্ট থেকে। code<লেবেল = "রেঞ্জিনপুট"> ব্যাপ্তি </ label> <ইনপুট আইডি = "রেঞ্জিনপুট" প্রকার = "পরিসীমা" মিনিট = "0" সর্বোচ্চ = "10" মান = "5" অন্বেষণ = "রেঞ্জাল্যু.ভ্যালু = মান"> </ ইনপুট> <আউটপুট আইডি = "rangevalue"> 5 </ আউটপুট>

— ejlepoud

অন্য কেউ কি ভাবেন যে একটি অন্ধ স্লাইডার সরবরাহের অভাব রয়েছে। সত্য যে অভিনব উইজেট সরবরাহ করা মৌলিক মানের ভূমিকা নয়, তবে নির্বাচিত মানটি দেখানো এই উইজেটের মূল বিষয়, সুতরাং আমি মনে করি (বিকল্পভাবে) একটি স্লাইডার হ্যান্ডেলের উপরে একটি টুলটিপ হিসাবে একটি মৌলিক আকারে নম্বর দেখানো হবে একটি ভাল নকশা জন্য তৈরি।

— বাসেল শিশানী

@ বাসেলশিশনি আরও সম্মতি জানাতে পারেননি, এর পেছনের চিন্তার প্রক্রিয়া আসলে কী তা নিশ্চিত নয়।

— Noz

@ বাসেলশিশানী: এমডিএন অনুসারে : "পরিসর: এমন একটি সংখ্যা প্রবেশের জন্য একটি নিয়ন্ত্রণ যার সঠিক মান গুরুত্বপূর্ণ নয়।" এই অনুমানের আলোকে, কোনও সঠিক মান প্রদর্শন করা বোধগম্য নয়। তবে অনুশীলনে এটি সম্ভবত সঠিক মান নির্বাচন করার জন্যও ব্যবহৃত হবে।

— বোডো

Answer 2

যারা এখনও পৃথক জাভাস্ক্রিপ্ট কোড ব্যতীত সমাধানের সন্ধান করছেন For একটি জাভাস্ক্রিপ্ট বা 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>

জেএসফিডাল ডেমো

আপনি যদি পাঠ্য বাক্সে মানটি দেখতে চান তবে কেবল আউটপুটটিকে ইনপুটে পরিবর্তন করুন।

---

হালনাগাদ:

এটি এখনও আপনার এইচটিএমএলে লেখা জাভাস্ক্রিপ্ট, আপনি নীচের জেএস কোডের সাথে বাইন্ডিংগুলি প্রতিস্থাপন করতে পারেন:

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

হয় উপাদানগুলির আইডি বা নাম ব্যবহার করুন, উভয়ই মোডেন ব্রাউজারগুলিতে সমর্থিত।

Comments

+1 জানেন আমি <আউটপুট> সম্পর্কে জানি। কেবল সমস্যাটি হ'ল ইআই যদিও এটি সমর্থন করে না। (

— ডাব্লু 3 স্কুল

এটি এখনও জাভাস্ক্রিপ্ট, এবং ইনপুট উপাদানগুলির চেয়ে ফর্ম উপাদানটিতে অনিনপুট বাঁধাই আরও খারাপ।

— ই

@ সিক্সসিপিং, আমরা ফর্মের পরিবর্তে উপাদানগুলিতে ইনপুট বাঁধতে পারি, উদাহরণটি দেখানোর জন্য আমি এটি করেছি।

— রাহুল আর।

এই দেরী এবং নুব প্রশ্নটি ক্ষমা করুন, তবে হ্যান্ডলার কীভাবে তাদের এইচটিএমএল নাম দিয়ে পরিসীমা ইনপুট এবং পরিমাণকে বোঝায়?

— rep_movsd

@ রিপ_মোভসড, এটি এই.ফর্মনাম.আরঞ্জইনপুট বা এটি.ফর্মনাম.অ্যামাউন্ট হিসাবে একই। ফর্মগুলি তাদের নাম ব্যবহার করে উপাদানগুলিতে অ্যাক্সেস করুন। তবে আমি 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একটি সংস্করণ যা একটি ফর্ম বাইরে কাজ করে পেতে onchange সঙ্গে oninput প্রতিস্থাপন করুন। 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

ফায়ারফক্স ২ id="amount"In-এ, আউটপুট যোগ করার আগে পর্যন্ত এটি আমার পক্ষে কাজ করে না।

— রায়ান

এটি আইডি ছাড়াই কাজ করা উচিত:oninput="this.form.amount.value=this.value"

— d1Mm

এটি কাজ করে তবে আমি কীভাবে বর্তমান মূল্য পেতে পারি এবং পৃষ্ঠাটি সতেজ হওয়ার পরে এটি কীভাবে দেখাব? : - /

— ব্যবহারকারী 2513846

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>

নোট করুন যে এই ধরণের এইচটিএমএল ইনপুট উপাদানগুলির একটি লুকানো বৈশিষ্ট্য রয়েছে, যেমন আপনি যখন এলিমেন্টটিতে ফোকাস রাখবেন তখন আপনি বাম / ডান / ডাউন / উপরে তীর কীগুলির সাহায্যে স্লাইডারটি সরাতে পারবেন। হোম / শেষ / পেজডাউন / পেজআপ কীগুলির সাথে একই।

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

এছাড়াও, ব্যাপ্তিটি টেনে আনার সময় আপনি ইভেন্টগুলি পাবেন oninputon<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

এটি সেরা উত্তর ...

— অায়ো অ্যাডেসিনা

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পরিসীমা ইনপুট আপনার কথা শুনতে চান নির্বাচক।

এমনকি এটি সিলেক্টিসের সাথেও কাজ করে। এবং এটি একাধিক শ্রোতার সাথে কাজ করে। এবং এটি অন্য দিকে কাজ করে: সংখ্যা ইনপুট পরিবর্তন করুন এবং পরিসীমা ইনপুট সামঞ্জস্য করবে। এবং এটি পৃষ্ঠায় পরে যুক্ত হওয়া উপাদানগুলিতে কাজ করবে (এর জন্য https://codepen.io/HerrSerker/pen/JzaVQg দেখুন )

ক্রোম, ফায়ারফক্স, এজ এবং আই 11 এ পরীক্ষিত

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

ত্রুটি: {"বার্তা": "অপ্রকাশিত রেফারেন্সের ত্রুটি: getvalor সংজ্ঞায়িত করা হয়নি", "ফাইলের নাম": " stacksnippets.net/js ", "লিনেনো": 12, "কলনো": 169}

— দারুশ

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-MAXLENGTH
3-আকার
4-মিনিট
5-সর্বোচ্চ
মাত্র এটি কপি

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

Comments

এটি কেবল ভুল, এটি টপিক স্টার্টার যে অনুরোধ করেছে তা করে না।

— বলভো