Responsive CSS

[YuriGor]

Hi, very cool sliders, thank you very much!
I noticed that default CSS is designed for the specific size of the container element, so it looks bad in the arbitrary containers.
But it's pretty easy to make sliders responsive by minor changes in CSS only.
Here is how it looks like currently and after applying 'responsive' CSS:

Here is a CSS override:
(I made it optional, to be applied only if container has 'responsive' class)

.responsive.noUi-horizontal .noUi-handle {
  height: 100%;
  top: -6px;
}

.responsive.noUi-horizontal .noUi-origin {
  height: calc(100% + 12px);
}
.responsive.noUi-horizontal .noUi-handle:before,
.responsive.noUi-horizontal  .noUi-handle:after {
  height: 50%;
  top: 25%;
}


.responsive.noUi-vertical .noUi-handle {
  width: 100%;
  left: -6px;
}

.responsive.noUi-vertical .noUi-origin {
  width: calc(100% + 12px);
}
.responsive.noUi-vertical .noUi-handle:before,
.responsive.noUi-vertical  .noUi-handle:after {
  width: 50%;
  left: 25%;
}

Here you can play with it

Let me know if you are interested in PR for making this built-in.

Also, notice - there is a problem with double lines on handles.
According to my experience - such things may be caused by CSS transform scale -- kind of rendering distortion.

[leongersen]

I'd definitely be interested in a PR improving the base stylesheet. Preferably as the standard behavior, if possible. I think that should mostly be doable with calc. That way, only the width/height of the container would need to be overridden to scale the slider.

[YuriGor]

I, maybe, misunderstood you a bit, but from your words "that should mostly be doable with calc" I have the impression you think this is not done yet.
If so, then it's actually done, take a look at codepen, please, there is a link in the first post.
Or are you talking about some better way this can be implemented?

[leongersen]

Sorry I wasn't clear; your implementation is pretty much complete. I'm just saying it could be added as the default style (so without a .responsive container class), because, due to the use of calc, the whole thing would be backward-compatible.

[YuriGor]

Yes, it's absolutely not a problem to make it unconditional - I made it so just to be able to show the difference in the demo, before/after you know..
Ok, as soon as I will have a bit of free time - I will push a PR.