search

leongersen / noUiSlider

noUiSlider is a lightweight, ARIA-accessible JavaScript range slider with multi-touch and keyboard support. It is fully GPU animated: no reflows, so it is fast; even on older devices. It also fits wonderfully in responsive designs and has no dependencies.
https://refreshless.com/nouislider/
MIT License
5.67k stars 659 forks source link

Responsive CSS #1034

Open YuriGor opened 4 years ago

YuriGor commented 4 years ago

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: image 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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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.