Значення діапазону введення типу HTML5 показує значення діапазону

114

Я роблю веб-сайт, на якому хочу використовувати слайдер діапазону (я знаю, що він підтримує лише веб-браузери).

Я повністю її інтегрував і працює чудово. Але я хотів би використовувати a, textboxщоб показати поточне значення слайда.

Я маю на увазі, якщо спочатку слайдер має значення 5, тож у текстовому полі він повинен відображатись як 5, коли я ковзаю значення у текстовому полі, слід змінювати.

Чи можу це зробити, використовуючи лише CSSабо html. Я хочу уникати JQuery. Це можливо?

html  css  range 
— Нірай Чаухан
джерело
1
Ви не можете зробити це без JavaScript.
— mrtsherman
3
Ви майже можете це зробити за допомогою css, використовуючи :before/ :after, contentі attr(), як це . Однак: перед /: після того, як псевдоелементи фактично з’їдають частину діапазону слайдера (хоча, можливо, це можна виправити), і найголовніше, що значення маніпулятором повзунком не оновлюються. Тим не менш, я думав, що було б цікаво залишити це тут. Це може стати можливим у майбутньому.
— waldyrious
3
Виправлення рішення @waldir призводить до jsfiddle.net/RjWJ8, хоча він все ще використовує JavaScript для оновлення атрибуту значення з властивості.
— користувач1277170

Відповіді:

110

Для цього використовується JavaScript, а не 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="">
Розгорніть фрагмент

— ejlepoud
джерело
5
але чи можна це зробити без javascript або jquery?
— Niraj Chauhan
15
Це з mobile-web-app.blogspot.com/2012/03/… , все ще JavaScript. code<label for = "rangeinput"> Діапазон </label> <input id = "rangeinput" type = "range" min = "0" max = "10" value = "5" onchange = "rangevalue.value = value"> </input> <output id = "rangevalue"> 5 </output>
— ejlepoud
46
Хтось ще думає, що забезпечення сліпого слайдера бракує. Правда, що надання фантазійних віджетів не є роллю базового стандарту, але показ вибраного значення є основним для цього віджета, тому я думаю, що (необов'язково) показ числа в базовій формі, наприклад, підказка на вершині ручки повзунка, зробити для кращого дизайну.
— Базель Шишані
1
@BaselShishani Не міг погодитись більше, не дуже впевнений, що за цим процесом мислив.
— Ноз
2
@BaselShishani: За даними MDN : "діапазон: контроль для введення числа, точне значення якого не важливо." Зважаючи на це припущення, показувати точну цінність має сенс. Але на практиці він, ймовірно, також буде використовуватися для вибору точних значень.
— bodo
166

Для тих, хто все ще шукає рішення без окремого коду javascript. Немає простого рішення без написання функції javascript або 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

Якщо ви хочете показати значення у текстовому полі, просто змініть вихідний на вхідний.

Оновлення:

Це все ще Javascript, написаний у вашому html, ви можете замінити прив’язки на код нижче JS:

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

Або використовувати Id або ім'я елемента, обидва підтримуються в браузерах morden.

— Рахул Р.
джерело
1
+1 знаю, я знаю про <вихід>. Єдина проблема полягає в тому, що EI не підтримує цього. (W3School) w3schools.com/tags/tryit.asp?filename=tryhtml5_output
— radbyx
4
Це все ще JavaScript, і гірше пов’язувати вхід на елемент форми, ніж на сам елемент введення.
— cuixiping
2
@cuixiping, ми можемо прив’язати oninput до елемента замість форми, я просто зробив це, щоб показати приклад.
— Рахул Р.
Пробачте це питання запізнення та нобі, але як обробник посилається на rangeInput та суму за їхніми іменами HTML?
— rep_movsd
@rep_movsd, це те саме, що this.formName.rangeInput або this.formName.amount. Форма доступу до елементів, використовуючи їх ім'я. Однак я не впевнений на 100%,
— Рахул Р.
39

версія з редагованим введенням:

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

— d1Mm
джерело
6
Замініть змінні форми на this.nextElementSiblingабо this.previousElementSiblingзамініть oninput на onchange, щоб отримати версію, яка працює поза формою. jsfiddle.net/Xjxe6/94
— Доміно
32

ще кращим способом було б зафіксувати подію введення на самому вході, а не на всій формі (ефективність):

<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додаванням відповідно до коментаря Райана).

— Ілана Хакім
джерело
3
У Firefox 27 це не спрацювало для мене, поки я теж не додав id="amount"вихід.
— Райан
це повинно працювати без id:oninput="this.form.amount.value=this.value"
— d1Mm
1
це працює, але як я можу отримати поточне значення та показати його, коли сторінка оновлюється? : - /
— user2513846
14

Якщо ви хочете, щоб ваше поточне значення відображалося під повзунком і рухалося разом із ним, спробуйте:

<!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 має одну приховану функцію, наприклад, ви можете переміщувати повзунок клавішами зі стрілками вліво / вправо / вниз / вгору, коли елемент фокусується на ньому. Те саме з клавішами Home / End / PageDown / PageUp.

— друган
джерело
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'>ви отримуватимете події під час перетягування діапазону.

— Антоніо Альмейда
джерело
2

Для людей, які не цікавляться використанням 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>
— hexaJer
джерело
1

У мене є рішення, яке передбачає (Vanilla) JavaScript, але лише як бібліотека. Ви можете включити його один раз, і тоді все, що вам потрібно зробити, це встановити відповідний sourceатрибут кількості входів.

sourceАтрибут повинен бути querySelectorAllселектором вхідного діапазону ви хочете слухати.

Він навіть працює з селекторами. І це працює з кількома слухачами. І це працює в іншому напрямку: змінити введення числа і ввести діапазон буде скориговано. І він буде працювати над елементами, доданими пізніше на сторінку (перевірте https://codepen.io/HerrSerker/pen/JzaVQg для цього)

Тестували в Chrome, Firefox, Edge та 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>
Розгорніть фрагмент

— юнзен
джерело
0 

<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>
Розгорніть фрагмент

— луїс
джерело
1
Помилка: {"message": "Uncaught ReferenceError: getvalor не визначено", " name file ": " stacksnippets.net/js ", "lineno": 12, "colno": 169}
— Darush
0

Спробуйте це :

 <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();
  });
— ссавці
джерело
-3

якщо ви все ще шукаєте відповідь, ви можете використовувати type type = "number" замість type = "range" min max max, якщо вона встановлена ​​в такому порядку:
1-ім'я
2-maxlength
3-розмір
4-хв.
5-max
просто скопіюйте його

<input  name="X" maxlength="3" size="2" min="1" max="100" type="number" />
— кіо-адам
джерело
1
Це просто неправильно, це не робить того, про що вимагав тематичний старт.
— bolvo
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.