0

I am using react-input-range for my React App. It works perfect on large viewprt (PC, desktop). But on mobile/ tablet view, it shows error "Unable to preventDefault inside passive event listener invocation" when I move or touch 2 edge points start/end of input range. I would appreciate any help as I look for solution almost a week but no works. The problem only happen with Chrome white other browsers is totally ok. I have try adding CSS touch-action:none but no help.

React-input-range: https://www.npmjs.com/package/react-input-range

Component where i use react-input-range:

import React from "react";
import InputRange from "react-input-range";

import 'react-input-range/lib/css/index.css';
import "./Slider.css"

class Slider extends React.Component {
  onChange = range => {
    this.props.onChange({
      type: this.props.data.label,
      value: range
    });
  }
  render() {
    const { min, max, step, value, label } = this.props.data;
    return (
      <div className="slider">
        <label>{label}</label>
        <InputRange
          minValue={min}
          maxValue={max}
          step={step}
          onChange={this.onChange}
          value={value}
        />
      </div>
    )
  }
} 

export default Slider;

Thank you so much

vanminhquangtri
  • 145
  • 1
  • 9

1 Answers1

0

Couldn't solve the issue either and the Author isn't merging any PRs for years so doesn't seem to be solvable at the moment (as suggested in this answer).

Switched to a newer module: https://www.npmjs.com/package/react-range

David D.
  • 557
  • 7
  • 20