Styling support needed

[ar-to]

Hello, first of all thanks for building and maintaining this project. It's definitely needed and its great!

Having said that, there is a limitation on what can be changed to match existing styles or create new ones. Here are some I found while working with it and correct me if I missed something in the documentation or in general.

• displayValue distance from the slider is hard coded and requires a high width or height to allow.

• not very responsive. The width and height of the slider is not so easy to control because it seems to be nested within svg line elements. I found this when trying to make it fit the max width of say 100% on a div. it seems to require a fixed pixel value. I worked around it with something like this:
  .width( document.querySelector(".slider-wrapper").offsetWidth - 30 )
  I had to experiment with values until I got what I wanted. This one may be tricky but it definitely saves in positioning.

• the step(1) does not seem to work for negative numbers on the min() so I had to get around it with some ratio magic which made my code a bit complex and it would be awesome if this slider could handle it built-in.

[johnwalley]

Hi @ar-to and thanks for the feedback. I'll take a proper look at these some time this week but I just wanted to get back to you with some initial thoughts.

1. this could be made configurable
2. Could you provide a bit more context here? Basically, an example of the containing div and everything it contains would be helpful. Making the elements inside an svg responsive is quite a complicated topic and I'd like to make sure we're on the same page. I'm particularly interested in how you are setting the width and height of the svg element, as well as if you are setting the viewBox attribute.
3. Could I see a screenshot of this?

Finally, I'd just like to get a little more information on what else you are drawing inside the svg element? (I just want to rule out the use case where it's just the slider. An html slider is a much better fit in that situation, easier to style and make responsive).

Thanks!