Range slider kullanmak istediğim bir web sitesi yapıyorum (sadece webkit tarayıcılarını desteklediğini biliyorum).
Tamamen entegre ettim ve iyi çalışıyor. Ancak mevcut slayt değerini göstermek için bir textbox
kullanmak istiyorum.
Yani başlangıçta kaydırıcı 5 değerindeyse, metin kutusunda 5 olarak gösterilmeli, kaydırdığımda metin kutusundaki değer değişmelidir.
Bunu sadece CSS
veya html
kullanarak yapabilir miyim? JQuery`den kaçınmak istiyorum. Bu mümkün mü?
Hala ayrı bir javascript kodu olmadan bir çözüm arayanlar için. Javascript veya jquery fonksiyonu yazmadan çok az kolay çözüm var:
<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][1]
Değeri metin kutusunda göstermek istiyorsanız, çıkışı giriş olarak değiştirmeniz yeterlidir.
Güncelleme:
Html'niz içinde hala Javascript yazıyor, aşağıdaki gibi değiştirebilirsiniz aşağıdaki JS kodu ile bağlar:
document.registrationForm.ageInputId.oninput = function(){
document.registrationForm.ageOutputId.value = document.registrationForm.ageInputId.value;
}
Ya elementin Id'sini ya da adını kullanın, her ikisi de morden tarayıcılarda desteklenir.
Bu doğrudan jquery değil javascript kullanır. Başlamanıza yardımcı olabilir.
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="">
daha da iyi bir yol, giriş olayını girişin kendisinde yakalamak olacaktır tüm formdan ziyade (performans açısından):
<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>
İşte bir [fiddle](
) (Ryan'ın yorumuna göreid
eklenmiş olarak).