Pathslider on a svg grid

[rr20eid10]

Thank you for creating this pathslider! I've been searching all day for a way to make this type of grid with a slider. I can't find anything like it, but Your solution is a very close match. I read a blog post earlier where you said there didn't seem to be much interest in this solution, so I am happy to see that you haven't abandoned it! Adding the different line colors was one of the enhancements I was looking for as well.

My issue is I have to create a curved slider that sits within a grid. I need to customize the slider knob with an image as well. I've created the grid using svg, but I'm not sure how to integrate your pathslider "onto" the svg grid background. I'm guessing I could wrap both the svg (set as background) and position the pathslider in a container div, and then modify their respective parameters separately (dynamically perferably), but I'm out on a limb here. Could you help me with this? I appreciate your help and here is a rough visual rendering of what I'm trying to do. Thank you

[Mottie]

Hi @rr20eid10!

You can add the pathslider over the svg. Then adjust the points to get a close approximation to your curve. I played around with this demo, after using the builder demo to set the general shape.

The grip is set as a image using the css theme, so it should be easy to change it.

[rr20eid10]

Wow, that was fast! Thanks very much. I'm going to try this out asap! 💯

[rr20eid10]

Hi Rob,

My svg is an actual graph, not an image. I wouldn't be able to use the css background:url() property rule. I'm thinking I'll have to use css positioning, but how will the pathslider know where to start drawing the curve based on the x, y data of the svg graph? Is this possible using pathslider? Thank you!

[Mottie]

You can set the useCanvas option to false, then initialize pathslider on an element surrounding the SVG - I haven't tested applying the pathslider to the actual SVG, but it should work in theory.

If the points set in the Pathslider match up with the curve in the SVG, then the user won't be able to tell the difference.

[rr20eid10]

You can set the useCanvas option to false, then initialize pathslider on an element surrounding the SVG - I haven't tested applying the pathslider to the actual SVG, but it should work in theory.

I don't understand this: what is meant by "element surrounding the SVG"? The svg is in a container div are you saying initialize the slider on the container div and not with it?

Also, if I set useCanvasto false, the pathslider is invisible, only the grip displays.

If the points set in the Pathslider match up with the curve in the SVG, then the user won't be able to tell the difference.

I just don't understand what is meant here in this statement.

I do appreciate your answering and enhancing your pathslider. Your pathslider is great and I really want to use it. I need the plugin to take data from a json (or csv, for example) for both the line graph and slider and dynamically create/draw both of those elements from that data as displayed in my visual examples.

When I create fiddles, the slider doesn't appear on the graph even though I am copying and pasting the .js and .css from your github repo and adding jquery. :(

Thanks very much, Rob, for your awesome help.

[Mottie]

There are two issues as to why the fiddles don't work:

• jQuery needs to be loaded before pathslider. It works better if you load jQuery from the dropdown instead of adding it as an external resource.

  

• The document ready wrapper needs the $ (or jQuery) on the outside:

  $(function() { /* ... */ });

Also, start using the new drawCanvas callback to add the gradient. The colors aren't lost when the view port is resized - demo.

So what I meant is that you can turn off the canvas and add the curve into the svg - demo - the problem is that the curve in the svg doesn't use the same point coordinates as the plugin, so figuring out the differences can be complicated. A second problem, as you stated in issue #9, is that the grip doesn't line up with the curve when the graph is resizable.

I don't know what your timeline is on this project, but ideally, I think converting the plugin over to use only svg and no canvas would be ideal. I just need to learn a bit more about drawing svg's with javascript and time to work on it.

[rr20eid10]

Thanks again for all your help. Look forward to any enhancements you make.