framework7io / framework7

Full featured HTML framework for building iOS & Android apps
http://framework7.io
MIT License
18.04k stars 3.23k forks source link

Range slider is too easy to accidentally change when swiping/scrolling on mobile #4172

Open space-nuko opened 1 year ago

space-nuko commented 1 year ago

Describe the bug

If there is a page with a lot of sliders it's very easy to accidentally change them when swiping up/down. When using native Material components this doesn't happen, the slider waits until it's detected as a vertical pan to start changing the slider

WithdraggableBar true it's basically impossible to avoid changing the sliders on swipe. Disabling it improves things but it's still possible to happen if the slider thumb is inconveniently placed

To Reproduce

Try to swipe up and down naturally with your right hand on this page (Svelte)

<script lang="ts">
 import { Page, Navbar, Range } from "framework7-svelte"

</script>

<Page name="hell">
    <Navbar title="Test" backLink="Back" />

    {#each Array(100) as _, i}
        <Range min={0} max={100} step={1} value={70} draggableBar={false} />
    {/each}
</Page>

Expected behavior

The slider waits until it's sure that the user isn't trying to scroll upwards on mobile until it permits the value to be changed

Actual Behavior

The slider starts changing basically as soon as the user touches the screen

Screenshots

https://user-images.githubusercontent.com/24979496/236686644-4464589a-3ace-4c12-81b9-b7b03b16f822.mp4

Additional context

See this React component for what I'd like, it's much better behavior

https://zillow.github.io/react-slider/