GeekyAnts / NativeBase

Mobile-first, accessible components for React Native & Web to build consistent UI across Android, iOS and Web.
https://nativebase.io/
MIT License
20.15k stars 2.38k forks source link

first click goes nowhere #4722

Open Gismo1337 opened 2 years ago

Gismo1337 commented 2 years ago

Description

If you are try to slide the input mark from right to left or left to rigt, the mark react weird. The Userexperience is not acceptable.

CodeSandbox/Snack link

Can't reproduce in Sandbox. Link is tempalte. https://codesandbox.io/s/wonderful-shockley-p8025b

Steps to reproduce

import { Slider } from "native-base";

<Slider maxW="300" defaultValue={100} minValue={100} maxValue={1000} accessibilityLabel="hello world" step={100}>
   <Slider.Track>
     <Slider.FilledTrack />
   </Slider.Track>
   <Slider.Thumb />
</Slider>
  1. Try component
  2. See error

Bottom Slider is MultiSlider @ptomasroos an work as expceted. Top Slider ist React Native Base Slider and feels buggy. weirdslider

NativeBase Version

3.3.x

Platform

Other Platform

Android Simulator 'scrcpy' @ Ubuntu 21.04

Additional Information

No response

RobertDS07 commented 2 years ago

Using step={1} the experience is acceptable, considering that the step for input that user go to use is usually 1

ezgif com-gif-maker (1)

Gismo1337 commented 2 years ago

Thanks. the experience is much better. But first 'touch' after rerender goes nowhere. I stay at multislider until fix.

RobertDS07 commented 2 years ago

I was guessing it was a problem with my emulator, cool

Gismo1337 commented 2 years ago

I tested it live on my device. First click goes nowhere.

stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

RobertDS07 commented 2 years ago

@Gismo1337 maybe you can change issue title to the real issue: first click goes nowhere

tonyneel commented 2 years ago

I ran into this issue as well. Even with changing the first click issue having to specify the step prop to get the slider to approach normal functionality is strange and should probably at least be documented.

Viraj-10 commented 1 year ago

Hi @Gismo1337, When you pass the value maxValue={1000} and steps={100}. it forces the slider to increase its length by 10% each time you slide. If you want a smooth transition don't pass the steps prop it will adjust to your cursor. Also, I was unable to reproduce the first-click issue. please try it with the latest version.