Paramètres : Control.Slider(id de l'element HTML deplaçable,id de l'element HTML représentant la piste, [options])
Rôle : Créé un slider grace à 2 calques : 1 calque représentant la "piste". 1 calque représentant l'élément glissable.
Retourne : objet Control.Slider
Note :
Options : axe:horizontal | vertical Sets the direction that the slider will move in. It should either be horizontal or vertical. increment: ??? Defines the relationship of value to pixels. Setting this to 1 will mean each movement of 1 pixel equates to 1 value. maximum: ??? The maximum value that the slider will move to. For horizontal this is to the right while vertical it is down. minimum: ??? The minimum value that the slider can move to. For horizontal this is to the left while vertical it is up. Note: this also sets the beginning of the slider (zeroes it out). range: (exemple $R(0,20)) Ces valeurs subdivisent la piste en autant de parties (ici, 20). Fonctionne avec l'option "values" alignX: l'element HTML deplaçable s'arrête au nombre défini de pixel (largeur de la piste - alignX) alignY: l'element HTML deplaçable s'arrête au nombre défini de pixel (hauteur de la piste - alignY) sliderValue: position initial (entre 0.0 et 1.0) disabled: bloque le slider handleImage: id de l'image représentant le slider deplacable "non bloqué" handleDisabled: id de l'image représentant le slider deplacable "bloqué" values: (exemple: values:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]) Permet un déplacement de l'élément glissable sous forme de "grille magnétique". Accepte un tableau de valeur (entier). Cette options fonctionne avec l'option "range".Exemple 1 | Exemple 2 | Exemple 3 | Exemple 4 | Exemple 5 | Exemple 6
Cliquez sur "Tester" et déplacer le calque rouge :
function tester()
{
new Control.Slider('div_2','div_1',{
onSlide:function(v){$('div_3').innerHTML='glissement => '+v},
onChange:function(v){$('div_3').innerHTML='lacher => '+v}});
}