Move thumb directly where the user taps about react-native-slider HOT 22 OPEN

you can just wrap it with TouchableWithoutFeedback and gets coordinates when user tap.

tapSliderHandler = (evt) => { this.refs.slider.measure((fx, fy, width, height, px, py) => { this.setState({value: (evt.nativeEvent.locationX - px) / width}); })); }

<View ref="slider"> <TouchableWithoutFeedback onPressIn={this.tapSliderHandler}> <Slider value={this.state.value}/> </TouchableWithoutFeedback> </View>

it works for me

from react-native-slider.

@fadlykayo because react-native-slider takes its value from 0 (left edge) to 1 (right edge).
therefore we need to find the percentage of the completed area.
If user tapped on 61.16px from the edge of the slider with 360px width, it means that he pressed on the 0.17 part of the slider, so we can set the state of slider value

and yes, sorry for my english)

from react-native-slider.

It would be nice if it was built in and after pressing somewhere you could immediately start moving your finger to position slider more precisely

from react-native-slider.

@avkvak Thank you for this tip. This works great! Next up is to figure out how the the thumb will continue to be dragged after the user pressed the slider... Any ideas?

from react-native-slider.

@avkvak thank you for the detailed explanation. hope this also could help others.

from react-native-slider.

+1

from react-native-slider.

+1

from react-native-slider.

+1

from react-native-slider.

+1

from react-native-slider.

avkvak . 666

from react-native-slider.

avkvak's solution works well - hoping you could put it into a PR?

from react-native-slider.

@avkvak , can you please let me know how it's work,
For me it always provide '0', I got following values
evt.nativeEvent.locationX = 61.17 (changeable on touch)
px = 0(always)
with = 360 (always)

So according to formula (evt.nativeEvent.locationX - px) / width
(61.17 - 0) / 360

from react-native-slider.

@Ashi90 , "px" is a just slider offset from the edge of the screen.
So we calculate exactly the part of the pressed slider, except white space

from react-native-slider.

@avkvak ,Ok "PX" is offset value from the edge of the screen, but what about others, I'm not getting the actual position of touch in slider.

from react-native-slider.

@Ashi90 have the same problem. not getting the actual position where I tap. did you already find any solution for this?

@avkvak could you maybe explain more about the formula? why you divide it with width?

from react-native-slider.

@avkvak Thank you for this tip. This works great! Next up is to figure out how the the thumb will continue to be dragged after the user pressed the slider... Any ideas?

Any progress on this?

from react-native-slider.

You can do something like this!

handelSliderTap = (event) => { 
    	this.refs.sliderWrapper.measure((fx, fy, width, height, px, py) => {
    		const completedDistance = ((event.nativeEvent.locationX - px) / width) * 100
                const completedDuration = (completedDistance * this.state.duration) / 100
    		...
    	})
    }

from react-native-slider.

Sadly this workaround causes an error on android to me

upd: it can be fixed by adding any style to <View ref="slider" />

from react-native-slider.

have look on pull request #164 it will be helpful for you

from react-native-slider.

here is @avkvak answer but with hooks, works by tapping, but not by tapping and dragging in the same gesture

const AddSlider = ({ setState, state }) => {
  const viewRef = useRef(null);
  const tapSliderHandler = (evt) => {
    if (viewRef.current) {
      viewRef.current.measure((fx, fy, width, height, px) => {
        const location = ((evt.nativeEvent.locationX - px) / width) * 100;
        setState(location);
      });
    }
  };
  return (
      <View ref={ viewRef }>
        <TouchableWithoutFeedback onPressIn={ tapSliderHandler }>
           <Slider value={state}>...
  ...);

from react-native-slider.

have look on pull request #164 it will be helpful for you

Seems like its not working

from react-native-slider.

have look on pull request #164 it will be helpful for you

Seems like its not working
If you are facing then comment i will try to resolve it🙂

from react-native-slider.