Диапазон типа входа легко активировать при прокрутке в мобильном телефоне Chrome - PullRequest
Новая
       96

Диапазон типа входа легко активировать при прокрутке в мобильном телефоне Chrome

0 голосов
/ 01 мая 2020

У меня есть входы диапазона, которые расположены рядом с 2 кнопками. Когда вы прокручиваете на мобильном сафари, очень легко случайно переместить вход, однако у кнопок нет этой проблемы

Это разметка: 

<div class="row">
  <button>-</button>
  <input class="range" type="range" min="0" max="100" value="10">
  <button>+</button>
</div>

Но эта демонстрация, вероятно, лучший способ увидеть это:

https://wsor1.csb.app/

Почему это происходит? Это просто браузер qwerk? Есть ли способы смягчить это?

Это не так важно, но ответственный код React: https://codesandbox.io/s/pedantic-neumann-wsor1

const Row = () => {
  const [value, setValue] = React.useState(10);

  return (
    <div className="cont">
      <div className="row">
        <button onClick={() => setValue(value - 10)}>-</button>
        <input
          onChange={e => setValue(+e.currentTarget.value)}
          className="range"
          type="range"
          value={value}
          min={0}
          max={100}
        />
        <button onClick={() => setValue(value + 10)}>+</button>
      </div>
    </div>
  );
};
export default function App() {
  const items = new Array(50).fill(0);
  return (
    <div className="App">
      {items.map((item, index) => {
        return <Row key={index} />;
      })}
    </div>
  );
}
...