Fonte: Sara/PlusCoding
Como nós sabemos com o HTML5 saíram imensos input types que pudemos usar com os nossos formulários para dar uma melhor visita aos utilizadores, um deste elementos é o slider o qual vou explicar como usar neste tutorial.
O slider atualmente só é suportado pelo opera e google chrome portanto este tutorial é meramente informativo e durante uns tempos seria melhor para os vossos utilizadores usarem a Jquery UI para atingirem este efeito.
O html para termos um slider é muito simples é só:
<input id="slider" type="range" min="0" max="100" step="5" value="50" />
Passando a explicar, o input type de slider pode levar estes quatro atributos:
Min é o mínimo do slider, neste caso é 0 mas podem definir como quiserem.
Max é exactamente o contrário e neste caso pus 100 para o nosso slider ser de 0 a 100.
Step é quanto muda o valor quando mexemos no slider, neste caso o nosso slider quando é mexido muda de 5 em 5 valores, sendo impossível colocarmos por exemplo 91, pois este salta do 90 para o 95.
Value é com quanto o nosso slider começa de origem.
Depois colocamos um span para conseguirmos identificar no Jquery e mudar o seu valor de acordo com o valor do slider:
<input id="slider" type="range" min="0" max="100" step="5" value="50" /> <p>Valor actual:<span id="valor">50</span></p>
Agora vem o Jquery:
$('#slider').change(function(){ $('#valor').html(this.value); });
O que este pequeno pedaço de JQuery faz é quando o elemento com o id de slider é mudado ele muda o html do span com o id de valor para que este fique igual ao value do slider.
Como podem ver com um pouco de JQuery e HTML5 podemos dar uma visita melhor aos nossos utilizadores, se quiserem ver a demo a funcionar podem ver abaixo e esperem mais dicas destas de como juntar o HTML5 e Jquery para fazer pequenos melhoramentos á visita de o utilizador.
(Usem apenas Chrome ou Opera para Visualizar a demo pois como disse acima são os únicos que suportam este elemento)