Sliders dan al usuario la capacidad de introducir un valor visualmente - como parte de un todo. En CSS3, un control deslizante se asegura de que el usuario introduce un valor correcto dentro de un rango de valores, por lo que no tiene que preocuparse por problemas de seguridad o valores incorrectos. Como resultado, deslizadores proporcionan un medio valioso de lo que permite la entrada variable.

El siguiente ejemplo muestra cómo utilizar un control deslizante en la aplicación. Comienza con el HTML que se utiliza para definir la ubicación y el aspecto básico de la barra deslizante. (Puede encontrar el código completo para este ejemplo en la carpeta Capítulo 06Widgets de la código descargable como Slider.HTML.)

Usando el widget deslizante
050
Valor: 

La corredera tiene un valor mínimo de 0 y un valor máximo de 50. La corredera también utiliza el siguiente CSS para dar la salida de un aspecto más agradable y para que sea posible para marcar el comienzo y el final de la escala.

Como se puede ver, el CSS coloca el comienzo y el final de la escala en una posición determinada para que coincida con el tamaño de la barra deslizante. Por lo que el usuario sepa, la escala y el control deslizante son de una sola pieza, pero en realidad son dos piezas en el código. La pieza restante del código es la secuencia de comandos que se muestra aquí.

$ (Function () {$ ("#Slider") .slider ({// Establecer el máximo value.max deslizante: 50, // Realizar tareas cuando el valor changes.change: function (event, ui). {// mostrar el valor actual de $ deslizador ("#Valor") .text ($ ("#Slider") .slider ("valor")) -}}) -})

En este caso, el código establece el valor máximo control deslizante a 50. Los valores predeterminados valor mínimo a 0. Sin embargo, puede establecer los valores máximo y mínimo en cualquier posición. A pesar de que el ejemplo no lo demuestra, el cursor puede tener más de un mango, por lo que puede representar un rango. Esta flexibilidad significa que puede pedir al usuario que introduzca la vez una partida y un punto de parada.

Uno de los eventos más utilizados es el cambio. El ejemplo muestra el nuevo valor cada vez que el usuario termina de mover el mango. Sin embargo, la forma en que se utiliza la salida depende de su aplicación. Generalmente, se utiliza la salida para proporcionar la entrada de datos o control de aplicaciones. Sin embargo, es una buena idea para mostrar el valor real de control deslizante para que el usuario conoce el valor real de entrada.