Is it mobile optimized?

[mauron85]

Hi, first thank you for great component. I would like to use it in HTML5 SPA. The only issue on mobile (Chrome, Safari) is that sometimes component is not responsive sliding. Not sure if it's because the drag handlers are too small for fingers or any problem. Is the component mobile ready?

[fetis]

Hi, @mauron85 I'm using it for responsive website, can't say it's super mobile ready, but it works fine on both Android/iOS. The drag handlers is small indeed, but I don't care so much about this. You can restyle the component for mobile and make it bigger. It's pretty easy.

[hughlomas]

I've managed to improve the mobile surface area using :before and :after pseudo elements.

.input-range__slider-container{
  z-index: 1;
}

.input-range__slider:before{
  width: 200%;
  height: 200%;
  top: -50%;
  position: absolute;
  left: -50%;
  content: ' ';
  z-index: 2;
}

.input-range__track--background{

  &:before{
    position: absolute;
    content: ' ';
    width: 100%;
    height: 1.5em;
    top: -1.5em;
    left: 0;
  }

  &:after{
    position: absolute;
    content: ' ';
    width: 100%;
    height: 1.5em;
    top: 100%;
    left: 0;
  }
}

The width/height values can be modified to whatever you want, but this made it feel great on mobile because it adds a nice padding zone for the touch events to hit.

[oyeanuj]

@hughlomas Thanks for the tip! Does this make sense as a PR to the existing CSS?

[kyungmi]

@hughlomas Thank you so much! 👍 👍

[pabloturati]

@hughlomas thanks so much, this really helped solve my problem.