Sliders dar ao usuário a capacidade de introduzir um valor visuais - como parte de um todo. Em CSS3, um controle deslizante garante que o usuário insere um valor correto dentro de um intervalo de valores, assim você não precisa se preocupar com questões de segurança ou valores incorretos. Como resultado, controles deslizantes fornecem um valioso meio de permitir a entrada variável.

O exemplo a seguir mostra como usar um controle deslizante na sua aplicação. Ela começa com o código HTML utilizada para definir a localização e a aparência de base do deslizante. (Você pode encontrar o código completo para este exemplo no Chapter pasta 06 Widgets do código para download como Slider.HTML).

Usando o Slider Widget
050
Valor: 

O controle deslizante tem um valor mínimo de 0 e um valor máximo de 50. O controle deslizante também usa o seguinte CSS para dar a saída de uma aparência mais agradável e para torná-lo possível para marcar o início e fim da escala.

Como você pode ver, o CSS coloca o início eo fim da escala em uma determinada posição para que corresponda ao tamanho do controle deslizante. Tanto quanto o usuário sabe, a escala e o controle deslizante são uma peça, mas eles são realmente duas peças no código. A parte restante do código é o script mostrado aqui.

$ (Function () {$ ( "# Slider") deslizante ({// Definir o máximo value.max deslizante:. 50, // Executar tarefas quando o valor changes.change: function (evento, ui) {// exibição o valor controle deslizante atuais US $ ( "# Value") texto ($ ( "# Slider") deslizante ( "value").) -..}}) -})

Neste caso, o código define o valor máximo controle deslizante para 50. Os padrões mínimos de valor para 0. No entanto, você pode definir tanto a valores máximos e mínimos para qualquer posição. Embora o exemplo não mostra ele, o cursor pode ter mais de uma pega, de modo que pode representar uma gama. Esta flexibilidade significa que você pode pedir que o usuário de entrada tanto de partida e um ponto de parada.

Um dos eventos mais utilizados é a mudança. O exemplo mostra o novo valor cada vez que o usuário termina de mover a alavanca. No entanto, a maneira em que você usar a saída depende da sua aplicação. Geralmente, você usar a saída para fornecer a entrada de dados ou controle de aplicativos. No entanto, é uma boa idéia para mostrar o valor real controle deslizante para que o usuário sabe o valor de entrada real.