Barras deslizantes dar ao utilizador a capacidade para introduzir um valor visualmente - 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, deslizantes fornecer um valioso meio de permitindo entrada variável.

Video: Controle deslizante no Geogebra

O exemplo a seguir mostra como usar um controle deslizante na sua aplicação. Ela começa com o código HTML usado para definir a localização e aparência básica do controle deslizante. (Você pode encontrar o código completo para este exemplo na pasta Capítulo 06Widgets 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 posição particular para que ele 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.

Video: Controles deslizantes do GeoGebra e construção de triângulos

$ (Function () {$ ("#Slider") .slider ({// Definir o máximo value.max deslizante: 50, // Executar tarefas quando o valor changes.change: function (evento, ui). {// exibe o valor deslizante atuais US $ ("#Valor") .text ($ ("#Slider") .slider ("valor")) -}}) -})

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. Mesmo que o exemplo não mostrá-lo, o Slider pode ter mais de uma alça, para que ele possa representar um intervalo. 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 usados ​​é a mudança. O exemplo mostra o novo valor cada vez que o usuário termina de mover a alça. 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 do seletor real para que o usuário saiba o valor de entrada real.