Move thumb directly where the user taps

[charliesbot]

Only way to move the thumb is by sliding it. But if the user taps directly in a section of the slider, it won't move directly to that position.

I've seen that behaviour in the youtube app, for example

so far, what a great library!

[luisfuertes]

+1

[hugohow]

+1

[ghost]

+1

[avkvak]

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

[jariwalabhavesh]

+1

[gitDengXiao]

avkvak . 666

[oliviachang29]

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

[Ashi90]

@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

[avkvak]

@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

[Ashi90]

@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.

[fadlykayo]

@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?

[avkvak]

@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)

[fadlykayo]

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

[twerff]

@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?

[llphickman]

@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?

[saeidee]

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
    		...
    	})
    }

[rtt63]

Sadly this workaround causes an error on android to me

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

[rogerkerse]

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

[naveenprakash74]

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

[Sleepful]

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}>...
  ...);

[RageOfJustice]

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

Seems like its not working

[naveenprakash74]

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🙂