Comments (4)
???
from react-native-multi-slider.
If you set smoothSnapped={true}
does this fix your problem? It will then snap on release.
from react-native-multi-slider.
Alright, after a long time, I did observe a solution. Using onValueChange
props is a bad idea. If you were to make it smooth, use the prop enableLabel
, with a customLabel
component which has the min and max values in its props to render the min and max values, and use the onValueChangeFinish
prop to set the min and max values. So the final solution may look something like this.
<MultiSlider
values={[minPrice, maxPrice]}
sliderLength={200}
onValuesChangeFinish={handleValueChange}
max={200}
smoothSnapped={true}
thumbTintColor={colors.secondaryColor}
enableLabel
customLabel={props => {
return (
<View>
<Text style={{
color: '#121212',
fontSize: 25,
fontFamily: 'Oswald-Bold',
marginBottom: 10
}}>${props.oneMarkerLeftPosition.toFixed(0)} - ${props.twoMarkerLeftPosition.toFixed(0)}</Text>
</View>
)
}}
step={1}
/>
from react-native-multi-slider.
Alright, after a long time, I did observe a solution. Using
onValueChange
props is a bad idea. If you were to make it smooth, use the propenableLabel
, with acustomLabel
component which has the min and max values in its props to render the min and max values, and use theonValueChangeFinish
prop to set the min and max values. So the final solution may look something like this.<MultiSlider values={[minPrice, maxPrice]} sliderLength={200} onValuesChangeFinish={handleValueChange} max={200} smoothSnapped={true} thumbTintColor={colors.secondaryColor} enableLabel customLabel={props => { return ( <View> <Text style={{ color: '#121212', fontSize: 25, fontFamily: 'Oswald-Bold', marginBottom: 10 }}>${props.oneMarkerLeftPosition.toFixed(0)} - ${props.twoMarkerLeftPosition.toFixed(0)}</Text> </View> ) }} step={1} />
In customLabel i am not able to set the range input using min and max. By default its picking the sliderLength as min and max. any solution?
from react-native-multi-slider.
Related Issues (20)
- Vertical marker not moving HOT 5
- Markers HOT 4
- Image disappears when the value changes
- Discrete Behavior Of Slider.
- When use slider in view with rotation the behaviour is different
- How to turn this slider into a single value slider? HOT 3
- Publish actual version HOT 2
- Not correct position of step markes and labels HOT 3
- Fix vulnerabilities
- Component does not accept testID HOT 4
- [Feature request] Add prop to customize third track color HOT 1
- Build failed : Unsupported class file major version 62
- Sometimes it's hard to slide the markers. Getting freeze on slide.
- missing props HOT 2
- CustomLeftMarker & CustomRightMarker not working HOT 1
- onValuesChangeFinish() makes slider to stop after one date HOT 2
- Markers don't move in one direction when overlapping HOT 2
- max value HOT 2
- Get NaN on minimum value
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-multi-slider.