2016-10-27 2 views
6

HTML5에 슬라이드 바를 사용하려면 범위 입력을 사용할 수 있습니다. 즉HTML5 범위 입력에서 방향을 바꾸려면 어떻게해야하나요?

<input type="range" min="0" max='5' value="0" step="1" > 

기본 동작은 왼쪽에 최소값을, 오른쪽에 최대 값을 갖는 것입니다. 대신 왼쪽에 최대 값을 넣을 수있는 방법이 있습니까?

내가 자바 스크립트로 할 수 있다는 것을 알고있다. HTML만으로도 그렇게 할 수 있습니까?


회신 "가능한 중복 질문"에 : 자바 스크립트 솔루션을 받아 들일 질문, 나는 HTML 전용 솔루션을 요구하고

. 중복이 아니라는 것이 분명하다고 생각합니까?/jQuery 코드는

PS 자바 스크립트입니다 :

#reversedRange { 
    direction: rtl 
} 
는 는 아래 참조 샘플 코드

는 CSS에 오른쪽에서 왼쪽으로 입력의 방향을 설정 :이 트릭을 할 수

+0

가능한 복제 http://stackoverflow.com/questions/27794439/html5-input-type-range- from-positive-to-negative) – Brad

+0

대답은 아니지만 CSS 솔루션이 있습니다 : http://stackoverflow.com/a/27794806/362536 – Brad

답변

9

변화하는 값을 설명하기 위해 필요하지 않습니다. 만 CSS 및

가 업데이트 날짜 input 요소에 id 속성 : @ MCTaylor17 (감사)에 의해 의견에 따라

$(function() { 
 
    $("#rangeValue").text($("#reversedRange").val()); 
 
    
 
    $("#reversedRange").on('change input', function() { 
 
    $("#rangeValue").text($(this).val()); 
 
    }); 
 
});
#reversedRange { 
 
    direction: rtl 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Max<input type="range" min="0" max='5' value="0" step="1" id="reversedRange">Min 
 
<div>value: <span id="rangeValue"></span> 
 
</div>

+3

'direction : rtl' 속성에 좋은 점이 있습니다. 순수한 HTML은 아니지만 적어도 자바 스크립트 솔루션보다 훨씬 낫습니다. 최소한 인라인 스타일을 넣을만큼 짧습니다. – cytsunny

+1

멋진 트릭. FYI, 이벤트에 "input"을 추가하면 (예 :'.on ("change input")) 실시간으로 업데이트됩니다. – MCTaylor17

+0

@ MCTaylor17 팁 감사합니다. – ochi

2

이 단순히 CSS로 할 수있다 및 순수 JavaScript. 이 스 니펫이 도움이되기를 바랍니다.

CSS & HTML

input{ 
 
    -webkit-transform: rotateY(180deg); 
 
    -moz-transform: rotateY(180deg); 
 
    -ms-transform: rotateY(180deg); 
 
    -o-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 
}
Max<input type="range" min="0" max='5' value="0" step="1" onmousemove="document.getElementById('Range_Value').innerHTML=this.value">Min 
 

 
<h3>Value: <span id="Range_Value">0</span></h3>

([양에서 음 HTML5 입력 유형 범위]의
관련 문제