Comments (22)
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.
Related Issues (20)
- Uncaught TypeError: Cannot read property 'style' of undefined HOT 2
- TypeError: mainStyles.thumbHorizontal is not a function HOT 2
- Border radius for ends of slider but not for 'active' section?
- New maintainer HOT 2
- Typings (for typescript) HOT 2
- Add note styles on track slider HOT 1
- componentWillReceiveProps has been renamed HOT 2
- AnimatedValue: Attempting to set value to undefined HOT 2
- Animated: `useNativeDriver` was not specified.
- thumbs go beyond the track when setting the maximum value to be lower than the current value of the slider HOT 1
- How to Add vibration and sound while sliding (Haptic Feedback) HOT 2
- SUPPORT. I am using createMaterialTopTabNavigator on home page and it consists of 3 parts. I have videos in each part, when I want to go back and forth any of the videos, it navigates to other parts. how can i solve this problem. thanks HOT 1
- Hello, how can I make two thumbs in one slider?
- inputRange must be monotonically non-decreasing 0, NaN iOS
- New lib, new maintainer.
- Fix a warnning for useNativeDriver
- Fix a warning for useNativeDirver
- Fix for react native version 0.69+
- Error when used with latest rn, ViewPropTypes has be deprecated HOT 1
- I am getting below error while I using in my react native app HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-slider.