Pathslider responsive

[rr20eid10]

Hi Rob,

Is there a way to make the pathslider responsive? Thanks!

[Mottie]

Hi @rr20eid10!

What exactly do you mean by responsive? Currently, if you resize the browser window, the grip position is updated to ensure it is still positioned correctly on the curve.

[rr20eid10]

I'm not sure what's wrong but when I resize the browser (Chrome 52.0.x) the svg graph resizes, but the slider isn't resizing.

screen >1140px

screen <600px

<svg width="100%" height="100%" viewbox="0 0 800 600" preserveAspectRatio="none" class="graph" aria-labelledby="title" role="img">
                          <title id="title">Conversion</title>
                        <g class="grid x-grid" id="xGrid">
                          <line x1="90" x2="90" y1="5" y2="371" ></line>
                        </g>
                        <g class="grid y-grid" id="yGrid">
                          <line x1="90" x2="705" y1="370" y2="370"></line>
                        </g>
                          <g class="labels x-labels">
                          <text x="100" y="400">15</text>
                          <text x="190" y="400">25</text>
                         . . .
                        </g>
                        <g class="labels y-labels">
                          <text x="80" y="15">1K</text>
                         . . .

                        </g>
                        </svg>

[Mottie]

Would you please set up a JSFiddle demo. And make sure to use the files from the gh-pages domain:

• https://mottie.github.io/Pathslider/css/pathslider.css
• https://mottie.github.io/Pathslider/js/jquery.pathslider.js

[Mottie]

Hmm, maybe you can try this code: http://stackoverflow.com/questions/4288253/html5-canvas-100-width-height-of-viewport

Don't use the window dimensions! Instead use the div wrapper dimensions to apply to the canvas.

[rr20eid10]

Hi Rob,

I read through the link on SO, thank you! There's a few answers there and although one is marked as the right answer, some commenters claim it's wrong. :) I'll have to read carefully.

Don't use the window dimensions! Instead use the div wrapper dimensions to apply to the canvas

I'm not sure I understand what you mean use div wrapper dimensions?

Here's a fiddle of my code. I don't know why nothing is displaying in the fiddle. Also, when I resize, the slider (in my browser Chrome on my box) turns black (it looses the gradient and the end gray color). When I refresh the window, the gradient returns, but turns to black again on resize. Thanks.