HTML5 e JQuery – O elemento Slider

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)

Tags | Atributos, html5, jquery, Jquery UI, slider