Buenos días,

en esta ocasión os voy a dejar un ejemplo realizado con varios deslizables. Es un elemento, que reconozco no utilizo mucho, pero os quería dejar este ejemplo, para que vierais que realizando diferentes acciones con un slider primario, podemos realizar actividades muy visuales.

Una vez realizado el ejemplo, la verdad que se me ocurrieron bastantes actividades, que con este efecto pueden quedar muy visuales y con un diseño pedagógico excelente.

Pantallazo ejemplo control deslizante

El ejemplo es bastante básico, debéis deslizar la barra inferior y veréis como se van movimiento y aparecen y desaparecen diferentes elementos en la pantalla. El ejercicio es la recreación del gol de Zidane en la final de la Champions. Para realizar los movimientos utilicé un deslizable, 3 para los 3 movimientos del balón y dos, para mover los “jugadores”.

Para asginar la misma variable a diferentes deslizadores, pinchamos sobre el deslizador que queremos modificar, pinchamos en la pestaña Diseño, y en la primera opción de la parte izquierda superior, vemos un combo con las diferentes variabels que nos permite asignarle, ahí es donde debemos elegir la misma variable para todos los elementos de nuestro diseño.

El truco para realizar tantos movimientos, dependientes de un solo deslizador, es utilizar la misma variable para moverlos a todos.  De esta forma podrás realizar los movimientos que quieras de cada uno de los deslizables, en el momento justo.

Si queréis ver como funciona, pincha aquí.

Pincha en la imagen para descargar el fichero story.

Descarga fichero story

Espero os pueda resultar útil,