Zakres typu danych wejściowych HTML5 pokazuje wartość zakresu

115

Tworzę stronę internetową, na której chcę użyć suwaka zakresu (wiem, że obsługuje tylko przeglądarki webkit).

W pełni to zintegrowałem i działa dobrze. Ale chciałbym użyć a, textboxaby pokazać bieżącą wartość slajdu.

Chodzi mi o to, że początkowo suwak ma wartość 5, więc w polu tekstowym powinien wyświetlać się jako 5, kiedy przesuwam wartość w polu tekstowym, powinna się zmienić.

Czy mogę to zrobić, używając tylko CSSlub html. Chcę tego uniknąć JQuery. Czy to możliwe?

html css range

— Niraj Chauhan
źródło

1

Nie możesz tego zrobić bez javascript.

— mrtsherman

3

Możesz to prawie zrobić za pomocą css używając :before/ :after, contenti attr(), w ten sposób . Jednak pseudoelementy: before /: after faktycznie pochłaniają część zakresu suwaka (chociaż może to naprawić), a co najważniejsze, wartości nie są aktualizowane, jeśli suwak jest manipulowany. Niemniej jednak pomyślałem, że byłoby interesujące zostawić to tutaj. Może się to stać możliwe w przyszłości.

— waldyrious

3

Naprawienie rozwiązania @waldir powoduje, że jsfiddle.net/RjWJ8 nadal używa javascript do aktualizacji atrybutu value z właściwości.

— user1277170

112

Używa javascript, a nie bezpośrednio jquery. To może pomóc Ci zacząć.

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

Rozwiń fragment

— ejlepoud
źródło

5

ale czy w ogóle można to zrobić bez javascript lub jquery?

— Niraj Chauhan

15

To jest z mobile-web-app.blogspot.com/2012/03/… , nadal javascript. code<label for = "rangeinput"> Zakres </label> <input id = "rangeinput" type = "range" min = "0" max = "10" value = "5" onchange = "rangevalue.value = value"> </input> <output id = "rangevalue"> 5 </output>

— ejlepoud

46

Czy ktoś inny uważa, że brakuje ślepego suwaka. Prawdą jest, że dostarczanie wymyślnych widżetów nie jest rolą podstawowego standardu, ale pokazanie wybranej wartości jest rdzeniem tego widżetu, więc myślę, że (opcjonalnie) pokazanie liczby w podstawowej formie, takiej jak podpowiedź na górze uchwytu suwaka, sprawiają, że projekt jest lepszy.

— Basel Shishani,

1

@BaselShishani Nie mogę się bardziej zgodzić, nie jestem pewien, jaki był proces myślowy za tym.

— Noz

2

@BaselShishani: Według MDN : "range: kontrolka do wprowadzania liczby, której dokładna wartość nie jest ważna.". W świetle tego założenia podanie dokładnej wartości nie ma sensu. Ale w praktyce prawdopodobnie będzie również używany do wybierania dokładnych wartości.

— bodo

166

Dla tych, którzy wciąż szukają rozwiązania bez osobnego kodu javascript. Niewiele jest łatwych rozwiązań bez pisania funkcji javascript lub 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 Demo

Jeśli chcesz wyświetlić wartość w polu tekstowym, po prostu zmień wyjście na wejście.

Aktualizacja:

To nadal JavaScript napisany w Twoim html, możesz zastąpić powiązania poniższym kodem JS:

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

Użyj identyfikatora lub nazwy elementu, oba są obsługiwane w przeglądarkach Morden.

— Rahul R.
źródło

1

+1 wiem, wiem o <output>. Jedynym problemem jest to, że EI go nie obsługuje. (W3School) w3schools.com/tags/tryit.asp?filename=tryhtml5_output

— radbyx

4

To wciąż javascript i gorzej jest powiązać oninput z elementem formularza niż z samym elementem wejściowym.

— cuixiping

2

@cuixiping, możemy przypisać oninput do elementu zamiast formularza, zrobiłem to po prostu, aby pokazać przykład.

— Rahul R.

Wybaczcie to późne i nieobliczalne pytanie, ale w jaki sposób program obsługi odwołuje się do rangeInput i amount, używając ich nazw HTML?

— rep_movsd

@rep_movsd, to to samo, co this.formName.rangeInput lub this.formName.amount. Formularz uzyskuje dostęp do elementów przy użyciu ich nazw. Jednak nie jestem w 100% pewien,

— Rahul R.

39

wersja z edytowalnym wejściem:

<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
źródło

6

Zamień zmienne formularza na this.nextElementSiblinglub this.previousElementSiblingi zamień oninput na onchange, aby uzyskać wersję działającą poza formularzem. jsfiddle.net/Xjxe6/94

— Domino

32

jeszcze lepszym sposobem byłoby przechwycenie zdarzenia wejściowego na samym wejściu, a nie na całej formie (z punktu widzenia wydajności):

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

Oto skrzypce ( iddodane zgodnie z komentarzem Ryana).

— Ilana Hakim
źródło

3

W Firefoksie 27 to nie zadziałało, dopóki nie dodałem id="amount"również danych wyjściowych.

— Ryan

powinno to działać bez identyfikatora:oninput="this.form.amount.value=this.value"

— d1Mm

1

to działa, ale jak uzyskać bieżącą wartość i pokazać ją po odświeżeniu strony? : - /

— user2513846

14

Jeśli chcesz, aby Twoja bieżąca wartość była wyświetlana pod suwakiem i poruszała się wraz z nią, spróbuj tego:

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

Rozwiń fragment

Zwróć uwagę, że ten typ elementu wejściowego HTML ma jedną ukrytą funkcję, na przykład możesz przesuwać suwak za pomocą klawiszy strzałek w lewo / w prawo / w dół / w górę, gdy element jest na nim aktywny. To samo z klawiszami Home / End / PageDown / PageUp.

— drugan
źródło

6

Jeśli używasz wielu slajdów i możesz używać jQuery, możesz wykonać następujące czynności, aby łatwo radzić sobie z wieloma suwakami:

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

Rozwiń fragment

Ponadto, używając oninputna <input type='range'>, otrzymasz zdarzenia podczas przeciągania zakresu.

— António Almeida
źródło

5

Najkrótsza wersja bez form, minlub zewnętrzny JavaScript.

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

Rozwiń fragment

— gengns
źródło

1

to najlepsza odpowiedź ...

— Ayo Adesina

2

Dla ludzi, którym nie zależy na używaniu jquery, oto krótka droga bez użycia id

<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
źródło

1

Mam rozwiązanie, które wykorzystuje (Vanilla) JavaScript, ale tylko jako bibliotekę. Przyzwyczaisz się to raz dołączyć, a potem wszystko, co musisz zrobić, to ustawić odpowiednisource atrybut wejściowych liczb.

sourceAtrybut powinien byćquerySelectorAll selektor wejścia Zakres chcesz słuchać.

Działa nawet z selectcs. Działa z wieloma słuchaczami. I to działa w drugą stronę: zmień wejście numeryczne, a wejście zakresu dostosuje się. I będzie działać na elementach dodanych później na stronie (sprawdź https://codepen.io/HerrSerker/pen/JzaVQg )

Przetestowano w Chrome, Firefox, Edge i 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>

Rozwiń fragment

— yunzen
źródło

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>

Rozwiń fragment

— luis
źródło

1

Błąd: {"message": "Uncaught ReferenceError: getvalor is not defined", "filename": " stacksnippets.net/js ", "lineno": 12, "colno": 169}

— Darush

0

Spróbuj tego :

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

oraz w sekcji jQuery :

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

— mamal
źródło

-3

jeśli nadal szukasz odpowiedzi, możesz użyć input type = "number" zamiast type = "range" min max praca jeśli ustawiono w tej kolejności:
1-nazwa
2-maxlength
3-size
4-min
5-max
tylko skopiuj to

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

— kyo adam
źródło

1

To jest po prostu złe, nie robi tego, o co prosił starter tematu.

— bolvo