SlickBoard | CSS/XML Timeline (new) | XML/SWF Charts | Timeline Eons

 < previousnext > 

 

Slider

 

A slider can be created with a draggable object constrained in one direction, which executes an action with a slider event.

The example below creates a simple slider, which can be customized to add colors, filters, different button states, etc.

 

Example

<slickboard>
   
   <!-- 2 gray rectangles as slider backgrounds -->
   <rect x='350' y='20' width='20' height='150' fill_color='555555' shadow='hole' /> 
   <rect x='280' y='230' width='150' height='20' fill_color='555555' shadow='hole' /> 
   
   
   <!-- blue circle -->
   <object id='blue_circle'>
      <circle x='100' y='75' radius='50' fill_color='8888ff' shadow='low' /> 
   </object>
   
   <!-- red circle -->
   <object id='red_circle'>
      <circle x='100' y='225' radius='50' fill_color='ff4400' shadow='low' /> 
   </object>      
   
   
   <!-- blue slider -->
   <object>
      <!-- slider handle -->
      <rect x='340' y='20' width='40' height='40' fill_color='8888ff' shadow='low' state='hit' />   
      
      <!-- constrain the handle vertically -->
      <constrain x='350' y='20' width='20' height='150' reflect='0' />
      
      <action>
         <!-- make the handle draggable -->
         <item type='drag' />
         <!-- adjust the alpha (transparency) of the blue circle when moving the slider -->
         <item type='adjust_alpha' target='blue_circle' event='slider' />
      </action>
      
   </object> 


   <!-- the red slider is similar to the blue slider, but contsrained horizontally -->   
   <object>
      <rect x='335' y='220' width='40' height='40' fill_color='ff4400' shadow='low' state='hit' />   
      <constrain x='280' y='230' width='150' height='20' reflect='0' />
      <action>
         <item type='drag' />
         <item type='adjust_alpha' target='red_circle' event='slider' />
         
         <!-- make the red circle 50% transparent to match the initial slider position -->   
         <item type='alpha_to' target='red_circle' value='.5' event='timer' delay='0' duration='0' />
      </action>
   </object> 
 
 
   <filter>
      <shadow id='low' distance='1' alpha='.5' blurX='5' blurY='5' />
      <shadow id='hole' alpha='.5' blurX='10' blurY='10' inner='true' />
   </filter>
   
</slickboard>

 

 < previousnext > 


Copyright © 2010-2017, maani.us