CSS3 gradient method for slider curve color

[rr20eid10]

Hi Rob,

Would you add linear gradient option to slider line color? I haven't tried this yet, but saw it in the docs as something you would add. Again, thanks for creating this!

[Mottie]

Actually, you can use the callbacks to add the gradient - demo (updated a few times... darn OCD!).

$(function() {

  function addGradient(slider) {
    var p = slider.pointsxy,
      ctx = slider.ctx,
      start = slider.percent / 100,
      grad = ctx.createLinearGradient(p[0], p[1], p[6], p[7]);
    grad.addColorStop(0, '#f00');
    grad.addColorStop(start, '#f00');
    if (start + 0.01 <= 1) {
      start += 0.01;
    }
    grad.addColorStop(start, '#00f');
    grad.addColorStop(1, '#00f');

    // assign gradients to fill and stroke styles
    ctx.clearRect(0, 0, slider.sliderDim[2], slider.sliderDim[3]);
    ctx.strokeStyle = grad;
    ctx.beginPath();
    ctx.moveTo(p[0], p[1]);
    ctx.bezierCurveTo(p[2], p[3], p[4], p[5], p[6], p[7]);
    ctx.stroke();
  }

  $('#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,
    curve: {
      width: 2,
      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: [125, 210, 125, 0, -75, 100, 550, 125],

    // *** 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 ***
    // called immediately after the pathslider has initialized
    create: function(e, slider) {
      addGradient(slider);
    },
    // called once the grip has been released
    update: function(e, slider) {},
    // called while the grip is moving
    slide: function(e, slider) {
      addGradient(slider);
    }

  });
});

[Mottie]

I'm working on adding an easier method. Give me some more time ;)

[rr20eid10]

Thanks for creating this and continuing to update. I appreciate your attention to enhancement requests!

I added a green border around the slider and I notice there is a lot of space around it. Why is that? There's no padding that I can see in the inspector.

Fiddle here (resources included but slider is not displaying)

610x250

If I adjust the height, the slider gets cut off at the bottom (not the top).

610x200

[Mottie]

You'll need to adjust the points values to move the curve into the upper left corner of the canvas. If you look at the "Readme" tab of the builder page, you'll see that the points are represented as follows:

// " sx,sy,  csxo,csyo, cexo,ceyo,  ex,ey"
 [ "125,210,  125,0,     -75,100,  550,125" ]

The only points you need to adjust are the sx and sy (starting point x & y) and ex and ey (ending point x & y). The values in the middle are for the Bezier curve control point offsets so you don't need to adjust those values.

So in the above example, move the entire curve left 125 pixels (make sx zero) and up 125 pixels (make ey zero). You'll end up with this:

// "sx,sy,  csxo,csyo, cexo,ceyo,  ex,ey"
 [ "0,85,    125,0,     -75,100,  425,0" ]

[rr20eid10]

Ok, I've been playing around with the points on the canvas on the pathslider builder and in my code. The canvas will need to be positioned on the grid as well, right? Can these points be set dynamically? like d3.js charts? I think I should create a different issue since it seems I may be off topic per the title. :)

[Mottie]

The code needed to dynamiclly update the plugin is currently super-messy. I'll make it so you can just call a redraw to do all the following (demo):

var slider = $('#slider').data('pathslider'),
  x = -10, // shift curve 10px left
  y = -10, // shift curve 10px up
  p = slider.points;
slider.points = [
  Math.round(p[0] + x), Math.round(p[1] + y),
  p[2], p[3], p[4], p[5],
  Math.round(p[6] + x), Math.round(p[7] + y)
];

// I'll add the following into the redraw method
// recalculate data points
slider.pointsxy = slider.convert2xy();
// update grip
slider.update();
// update curve
slider.drawCurve();
// this won't be in the redraw method, but I'm adding another
// callback method inside of the drawCurve function that can
// be used to call this
addGradient(slider);

[rr20eid10]

This is mad sweet, Rob. Thank you! I've been doing some reading and exercises on SVG api, hoping to understand the details of your plugin and ask you intelligent questions. I'm far from your sophistication in this, so the way you are stepping through creating the enhancements, documenting your code and showing the demos is really helping me (and anyone else who has or will use it). I was using the sx, sy coords to move the slider up and down "manually" because I really want to "integrate" the pathslider with an SVG line graph (if possible). Thank you for your time!

[Mottie]

Ok, new version out... here is an updated demo

$(function() {
  $('.shift').click(function() {
    var slider = $('#slider').data('pathslider'),
      x = parseInt($(this).filter('.x').text() || '0', 10),
      y = parseInt($(this).filter('.y').text() || '0', 10),
      p = slider.points;
    // shift start & end points
    slider.points = [
      Math.round(p[0] + x), Math.round(p[1] + y),
      p[2], p[3], p[4], p[5],
      Math.round(p[6] + x), Math.round(p[7] + y)
    ];
    // update curve
    slider.redraw(slider.points);
  });

  $('#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,
    curve: {
      width: 2,
      color: ["#f00", "#00f"],
      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: [125, 210, 125, 0, -75, 100, 550, 125],

    // *** 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
  });
});

I didn't include the drawCanvas function in the code above because I also made it so that adding a two-item array to the color value will automatically add the gradient.

curve: {
  width: 2,
  color: ["#f00", "#00f"],
  cap: "round"
}

All the following code does the same thing:

drawCanvas : function(slider, ctx, points) {
  // slider.ctx === ctx
  // slider.pointsxy === points
  var start = slider.percent / 100,
    grad = ctx.createLinearGradient(points[0], points[1], points[6], points[7]);
  grad.addColorStop(0, '#f00');
  grad.addColorStop(start, '#f00');
  if (start + 0.01 <= 1) {
    start += 0.01;
  }
  grad.addColorStop(start, '#00f');
  grad.addColorStop(1, '#00f');
  // assign gradients to fill and stroke styles
  ctx.strokeStyle = grad;

  // return a false value to prevent the curve from being drawn
  // in case you already did it!
  // return false;
}