Setup

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

Page Head

<!-- jQuery (required) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<!--Pathslider files (required) -->
<link href="css/pathslider.css" rel="stylesheet">
<script src="js/jquery.pathslider.js"></script>

CSS

#slider {
  width  : 275px;
  height : 60px;
  background: url(background.png) 10px 10px no-repeat;
}

• The width and height setting are generated by the builder. It basically finds the dimensions of the curve.
• A background image can be added when emphasizes the curve, as canvas is only able to add a stroke style (solid, gradient or pattern) to the curve.
• The background image position will most likely need to be adjusted to get the grip centered on the curve.

HTML

<div id="slider"></div>

Script (showing defaults)

$('#slider').pathslider({

  // *** Appearance ***
  // class added to the grip/handle
  // css presets: "black", "silver", "chrome1" or "chrome2"
  gripClass  : '',
  // when true, the grip will rotate based on the shape of the path
  rotateGrip : true,

  // use canvas, if available
  useCanvas  : true,
  // canvas bezier curve styling
  curve      : {
    width: 4,
    // set to array (v1.0.0) for a color gradient, e.g. ["#f00", "#00f"]
    color: "#333",
    cap: "round"
  },

  // *** Curve settings ***
  // 0-100 starting percentage value
  value      : 50,
  // BEZIER POINTS
  // sx,sy     = start x & y
  // csxo,csyo = control start x & y offset from start point
  // cexo,ceyo = control end x & y offset from end point
  // ex,ey     = end x & y
  //           [ sx,sy, csxo,csyo, cexo,ceyo,  ex,ey ]
  points     : [  0,50,   50,-50,   -50,-50,  250,50 ],

  // *** Smoothness tweaks ***
  // Total number of points of the curve to save; increase in increments of 100 to smooth out the
  // grip movement, but not more than 500 (it slows everything down)
  // I would prefer the script to automatically determine the number of points needed, but for now it is an option
  dataPoints : 200,
  // Distance on path from the last position (percentage) to check - increase this to scroll faster
  tolerance  : 3,
  // Distance from cursor x/y to find matching x/y on the curve (should be about the same size as the grip)
  range      : 30

  // *** Callback functions (bound by event hooks) ***
  create : function(event, slider) {},
  update : function(event, slider) {},
  start  : function(event, slider) {},
  slide  : function(event, slider) {},
  change : function(event, slider) {},
  stop   : function(event, slider) {},

  // canvas callback
  drawCanvas : function(slider, ctx, points) {
    // if doing something else to the canvas, use
    // slider.finishCurve(ctx, points);
    // return false;
  }

});

Methods