Events

Wiki Pages: Home | FAQ | Setup | Options | Events | Theme | Change

Event Hooks (Callback functions)

These events were match to be similar to the jQuery UI Slider events. The ".pathslider" is the namespace of the event and is required when you use "bind"

• create - Called when the slider has been created.
• start - Called when the user starts sliding the grip/handle.
• slide - Called each time the grip/handle moves along the curve (triggered many times).
• change - Called after the grip/handle has finished sliding and is different from when the slide began.
• stop - Called when the grip/handle is released (mouseup)
• update - Only called from the builder extension when the user moves any of the control points and the canvas updates.

Examples

You can bind to any of these custom event triggers as follows (see the demo page source for another example)

// All bound events need to include the name space ".pathslider" at the end of the event
$('#slider').bind('change.pathslider', function(event, slider){
  alert( 'new pathslider value is ' + slider.percent + '%' );
});

use one of the callback functions

// No namespace here!
$('#slider').pathslider({
  // event is included as a parameter because internally all callbacks
  // are executed when an event is triggered
  create: function(event, slider){
    alert('ready for action boss!');
  }
});

or use a shortcut method callback

$('#slider').pathslider(20, function(slider){
  alert('Slider now set to ' + slider.percent + '%');
});

Callback Arguments

If you use "slider" in the callback function, e.g. function(slider){...}, or in the trigger function, e.g. function(e, slider){...} these arguments will be available

• slider.$el - jQuery object of the slider (#slider).

• slider.$grip - jQuery object of the grip/handle.

• slider.sliding - true when the handle/grip is moving (set at start event and cleared on stop).

• slider.angle - contains the angle (actually the tangent) of the curve, or the angle to transform the grip to make it fit on the curve.

• slider.percent - current percentage value (between 0 and 100) where the grip/handle is positioned.

• slider.setSlider(#) - set the slider to the desired percentage (# is the percentage)

• slider.update() - Update the canvas (if used) and grip/handle positioning as well as refreshing the stored data points.

• slider.redraw() - redraw pathslider curve & call slider.update() and slider.setSlider() functions.