O Slider

Antes de começarmos a brincar com os controles de rolagem postos em nossas páginas, devemos antes criar a estrutura do HTML. Precisamos de dois elementos: um slider (o container) e um knob (o controle). Vamos usar duas divs aninhadas:

<div id="slider">
  <div id="knob"></div>
</div>

Logicamente, também devemos estilizar esses elementos, para que eles se pareçam, mesmo que remotamente, com um slider. Eu optei pela configuração mais simples possível:

#slider{
  background: #000;
  width: 200px;
}
#knob {
  background: #f00;
  width: 20px;
}

Pronto! Ele já está lá, não se movendo de jeito algum, mas está lá.

Movendo o Controle

Para que possamos mover o dito cujo, vamos instanciar a classe Slider, que faz todo o trabalho sujo para nós. Essa classe recebe três parâmetros: o container, o controle e as opções para o slider. Como queremos um simples slider comum e sem graça (por enquanto), vamos omitir o terceiro parâmetro.

var slider = new Slider("slider", "knob")

Difícil, não? Já temos um slider funcional! Aliás, quase funcional, ele não faz mais nada além de se mover. De que adianta um slider que só se move, e não retorna sua posição? Calma, chegaremos lá.

Adicionando Funcionalidade

Através da opção onChange, podemos fazer algo com a posição do slider. Pode-se atualizar um campo com a posição atual, mudar o tamanho/posição de alguma coisa na tela, enfim, não sou muito criativo, você pode ir bem mais longe que isso.

Para essa opção, devemos passar uma função que receberá como parâmetro a posição atual do slider. A partir disso, podemos fazer qualquer coisa com ele. Veja:

var slider = new Slider("slider", "knob", {
  "onChange": function(pos) {
    $("div-qualquer").setHTML("Posição do Slider: " + pos)
  }
})

É lógico que esse é o uso mais simplório possível. Fiz algo nem tão sem graça assim, veja nos exemplos. Aumenta fonte, diminui fonte… Dá pra fazer mais que isso sim, e muito.

Outras Opções

A Mootools também nos deixa mais algumas opções para incrementarmos nosso slider. São elas:

• steps: Indica o número de “steps” que o slider terá. Por padrão é setado como 100.
• mode: “vertical” ou “horizontal”. Define o modo do slider.
• offset: Recuo do controle em relação ao container.
• onComplete: função a ser executada quando o controle for soltado. Não recebe parâmetros, então é necessário usar o método getPos caso seja necessário utilizar a posição.

Ficou feio?

Aqui apliquei somente o estilo básico para o slider funcionar. Você pode se divertir com CSS, e torná-lo muito mais atraente. Nos exemplos mostrei meus estupendos talentos em design e criei algo mais interessante aos olhos do usuário.

Vou ficando por aqui, até mais!

Posts Relacionados

• Mootools – Options
• Ajax com a Mootools
• Scroller Made in Mootools
• Mootools – Menu Sanfona
• Mootools – Chain