범위 슬라이더를 사용하고 싶은 웹 사이트를 만들고 있습니다 (웹킷 브라우저 만 지원한다는 것을 알고 있습니다).
나는 그것을 완전히 통합했고 잘 작동합니다. 하지만 textbox현재 슬라이드 값을 표시 하기 위해 a를 사용하고 싶습니다 .
처음에 슬라이더 값이 5이면 텍스트 상자에 5로 표시되어야하고, 텍스트 상자의 값을 슬라이드하면 변경해야합니다.
난 단지 사용하여이 작업을 수행 할 수 있습니다 CSS또는 html. 나는 피하고 싶다 JQuery. 가능할까요?
답변
이것은 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="">답변
별도의 자바 스크립트 코드없이 여전히 솔루션을 찾고있는 사람들을 위해. 자바 스크립트 또는 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>텍스트 상자에 값을 표시하려면 출력을 입력으로 변경하면됩니다.
최신 정보:
여전히 html로 작성된 Javascript이므로 바인딩을 아래 JS 코드로 바꿀 수 있습니다.
document.registrationForm.ageInputId.oninput = function(){
document.registrationForm.ageOutputId.value = document.registrationForm.ageInputId.value;
}요소의 ID 또는 이름을 사용하십시오. 둘 다 모든 브라우저에서 지원됩니다.
답변
편집 가능한 입력이있는 버전 :
<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>답변
더 나은 방법은 전체 형식 (성능 측면)이 아닌 입력 자체에서 입력 이벤트를 포착하는 것입니다.
<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의 의견에 따라 추가됨).
답변
현재 값을 슬라이더 아래에 표시하고 함께 이동하려면 다음을 시도하십시오.
<!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 키와 동일합니다.
답변
당신이 사용하는 경우 여러 슬라이드를 , 당신이 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'>범위를 드래그하는 동안 이벤트를 받게됩니다.
답변
form, min또는 외부 자바 스크립트가 없는 최단 버전 입니다.
<input type="range" value="0" max="10" oninput="num.value = this.value">
<output id="num">0</output>