HTML5 입력 유형 범위 표시 범위 값

114

범위 슬라이더를 사용하고 싶은 웹 사이트를 만들고 있습니다 (웹킷 브라우저 만 지원한다는 것을 알고 있습니다).

나는 그것을 완전히 통합했고 잘 작동합니다. 하지만 textbox현재 슬라이드 값을 표시 하기 위해 a를 사용하고 싶습니다 .

처음에 슬라이더 값이 5이면 텍스트 상자에 5로 표시되어야하고, 텍스트 상자의 값을 슬라이드하면 변경해야합니다.

난 단지 사용하여이 작업을 수행 할 수 있습니다 CSS또는 html. 나는 피하고 싶다 JQuery. 가능할까요?

html  css  range 
— 니라 즈 차우 한
소스
1
자바 스크립트 없이는 이것을 할 수 없습니다.
— mrtsherman
3
당신은 할 수 있습니다 거의 사용 CSS를 사용하여이 작업을 수행 :before/ :after, content와 attr()같이, 이 . 그러나 : before / : after 가상 요소는 실제로 슬라이더 범위의 일부를 차지하며 (아마도 수정 가능할 수 있음) 가장 중요한 것은 슬라이더를 조작해도 값이 업데이트되지 않는다는 것입니다. 그럼에도 불구하고 나는 이것을 여기에 두는 것이 흥미로울 것이라고 생각했습니다. 미래에 가능해질 수도 있습니다.
— waldyrious
3
@waldir의 솔루션을 수정하면 jsfiddle.net/RjWJ8이 생성 되지만 여전히 javascript를 사용하여 속성의 값 속성을 업데이트합니다.
— user1277170

답변:

110

이것은 jquery가 아닌 javascript를 직접 사용합니다. 시작하는 데 도움이 될 수 있습니다.

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
하지만 어쨌든 자바 스크립트 또는 jquery없이 할 수 있습니까?
— Niraj Chauhan 2012
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
다른 사람은 블라인드 슬라이더를 제공하는 것이 부족하다고 생각합니까? 멋진 위젯을 제공하는 것이 기본 표준의 역할은 아니지만 선택한 값을 표시하는 것이이 위젯의 ​​핵심이라는 것은 사실이므로 (선택 사항) 슬라이더 핸들 위에있는 도구 설명과 같은 기본 형식으로 숫자를 표시하면 더 나은 디자인을 만듭니다.
— Basel Shishani 2013
1
@BaselShishani 그 뒤에 생각 과정이 무엇인지 정말로 확신하지 못했습니다.
— Noz 2013-04-22
2
@BaselShishani : MDN 에 따르면 : "범위 : 정확한 값이 중요하지 않은 숫자를 입력하는 컨트롤." 이러한 가정에 비추어 볼 때 정확한 값을 표시하지 않는 것은 의미가 있습니다. 그러나 실제로는 정확한 값을 선택하는데도 사용됩니다.
— bodo
166

별도의 자바 스크립트 코드없이 여전히 솔루션을 찾고있는 사람들을 위해. 자바 스크립트 또는 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로 작성된 Javascript이므로 바인딩을 아래 JS 코드로 바꿀 수 있습니다.

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

요소의 ID 또는 이름을 사용하십시오. 둘 다 모든 브라우저에서 지원됩니다.

— 라훌 R.
소스
1
+1은 <output>에 대해 알고 있습니다. 유일한 문제는 EI가 지원하지 않는다는 것입니다. (W3School) w3schools.com/tags/tryit.asp?filename=tryhtml5_output
— radbyx 2014-06-14
4
여전히 javascript이고 입력 요소 자체보다 양식 요소에 oninput을 바인딩하는 것이 더 나쁩니다.
— cuixiping 2014 년
2
@cuixiping, 우리는 양식 대신 요소에 oninput을 바인딩 할 수 있습니다.
— Rahul R.
이 늦고 멍청한 질문을 용서하십시오.하지만 핸들러는 HTML 이름으로 rangeInput 및 amount를 어떻게 참조합니까?
— rep_movsd 2015 년
@rep_movsd, this.formName.rangeInput 또는 this.formName.amount와 동일합니다. 양식은 이름을 사용하여 요소에 액세스합니다. 그러나 나는 100 % 확실하지 않다
— 라훌 R.
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.nextElementSiblingor this.previousElementSibling로 바꾸고 oninput을 onchange로 바꾸면 양식 외부에서 작동하는 버전을 얻을 수 있습니다. jsfiddle.net/Xjxe6/94
— Domino
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>

여기에 바이올린이 있습니다 ( idRyan의 의견에 따라 추가됨).

— 일라나 하킴
소스
3
Firefox 27에서는 id="amount"출력을 추가 할 때까지이 기능이 작동하지 않았습니다 .
— 라이언
이것은 id없이 작동합니다 :oninput="this.form.amount.value=this.value"
— d1Mm
1
이것은 작동하지만 어떻게 현재 값을 얻고 페이지가 새로 고쳐질 때 표시합니까? :-/
— user2513846 2015-09-03
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'>범위를 드래그하는 동안 이벤트를 받게됩니다.

— 안토니오 알메이다
소스
5

form, min또는 외부 자바 스크립트가 없는 최단 버전 입니다.

<input type="range" value="0" max="10" oninput="num.value = this.value">
<output id="num">0</output>
스 니펫 확장

— Gengns
소스
1
이것이 최고의 답변입니다 ...
— Ayo Adesina
2

사람들이 jquery 사용에 신경 쓰지 않는 경우 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>
— 헥사 저
소스
1

(Vanilla) JavaScript와 관련된 솔루션이 있지만 라이브러리로만 제공됩니다. 한 번만 포함 source하면 숫자 입력에 적절한 속성을 설정하기 만하면됩니다.

source속성은해야 querySelectorAll당신이 듣고 싶은 범위의 입력 셀렉터.

selectcs에서도 작동합니다. 그리고 여러 청취자와 함께 작동합니다. 그리고 다른 방향으로 작동합니다 : 숫자 입력을 변경하면 범위 입력이 조정됩니다. 그리고 나중에 페이지에 추가 된 요소에서 작동합니다 ( 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>
스 니펫 확장

— Yunzen
소스
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 is not defined", "filename": " 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 = "range"대신 input type = "number"를 사용할 수 있습니다. 순서대로 설정하면 min max work :
1-name
2-maxlength
3-size
4-min
5-max
just 복사 해

<input  name="X" maxlength="3" size="2" min="1" max="100" type="number" />
— 쿄 아담
소스
1
이것은 단지 잘못된 것입니다. 토픽 스타터가 요청한 것을 수행하지 않습니다.
— bolvo
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.