Estou a fazer um website onde quero utilizar o selector de alcance (sei que só suporta browsers de webkit).
Integrei-o totalmente e funciona bem. Mas gostaria de utilizar uma "caixa de texto" para mostrar o valor actual do slide.
Se inicialmente o cursor estiver no valor 5, então na caixa de texto deve aparecer como 5, quando deslizar o valor na caixa de texto deve mudar.
Posso fazer isto utilizando apenas CSS
ou html
. Quero evitar JQuery
. Será possível?
Para aqueles que ainda estão à procura de uma solução sem um código javascript separado. Há pouca solução fácil sem escrever um javascript ou uma função 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][1]
Se quiser mostrar o valor na caixa de texto, basta alterar a saída para a entrada.
Actualização:
Ainda é Javascript escrito dentro do seu html, pode substituir o encadernações com abaixo do código JS:
document.registrationForm.ageInputId.oninput = function(){
document.registrationForm.ageOutputId.value = document.registrationForm.ageInputId.value;
}
Ou usar elemento's Id ou nome, ambos são suportados em navegadores morden.
Isto usa javascript, e não jquery directamente. Pode ajudar a começar.
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="">
uma forma ainda melhor seria apanhar o evento de entrada na própria entrada em vez de na sua forma geral (em termos de desempenho):
<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>
Aqui's a [fiddle](
) (com oid
adicionado como por Ryan's comentário).