Comments (14)
@ptomasroos Hey can you have a look at this when you get a minute?
from react-native-multi-slider.
I will ! Hopefully during next week @rtman sorry for keeping it hanging
from react-native-multi-slider.
Ok I'll try my luck on stackOverflow in the mean time as I'm trying to get this working for an app demo this week.
from react-native-multi-slider.
Sorry to be blocking but having my own schedule for a release coming up on Friday. Have you tried this in the example app to see if the issue is reproducible there?
from react-native-multi-slider.
I'm not really sure how the values are treated when its a float. Thats the thing I can come up with on top of my mind
from react-native-multi-slider.
Maybe you can just handle that as display and convert it from integers instead, and increasing the range from 0-10000 to compensate or whatever fits your range
from react-native-multi-slider.
Thanks for helping out, part of it is a definitely the float issue. Though I'm not sure why floats would be not allowed?
Anyways, with the following change:
export class RangeMultiSlider extends React.Component{
constructor(props){
super(props);
console.log('this.props', this.props)
this.state = {
sliderValues: [this.props.min, this.props.max],
min: this.props.min,
max: this.props.max
};
}
onChangeValues = (values) => {
console.log('Slider values', values)
//console.log('this.props', this.props)
this.setState({
sliderValues: [parseInt(values[0]), parseInt(values[1])]
});
}
onChangeValuesFinish() {
if (this.props.currentRefinement.min !== this.state.sliderValues[0] || this.props.currentRefinement.max !== this.state.sliderValues[1]) {
this.props.refine({min: this.state.sliderValues[0], max: this.state.sliderValues[1]});
}
}
componentWillReceiveProps(nextProps){
if(nextProps.min !== this.state.min && nextProps.max !== this.state.max) {
console.log('nextProps', nextProps)
this.setState({
sliderValues: [parseInt(nextProps.min), parseInt(nextProps.max)],
min: parseInt(nextProps.min),
max: parseInt(nextProps.max)
});
}
}
render(){
console.log('sliderValues', this.state.sliderValues)
return(
<View style={{padding:8}}>
<Text style={{paddingLeft: 10, fontSize: 14, color: Colors.primaryTextColor, alignSelf: 'flex-start' , textAlign: 'left'}}>
{`${this.props.header}:`}
</Text>
<View style={{paddingTop: 20, paddingLeft: 8}}>
<MultiSlider
sliderLength={150}
selectedStyle={{backgroundColor: Colors.mainColor}}
unselectedStyle={{backgroundColor: 'silver'}}
containerStyle={{height:10}}
//trackStyle={{height:10, backgroundColor: 'red'}}
touchDimensions={{
height: 40,
width: 40,
borderRadius: 20,
slipDisplacement: 40,
}}
onValuesChange={(sliderState) => this.onChangeValues(sliderState)}
min={this.state.min}
max={this.state.max}
//values={[this.props.currentRefinement.min, this.props.currentRefinement.max]}
onValuesChangeFinish={() => this.onChangeValuesFinish()}
values={[this.state.sliderValues[0], this.state.sliderValues[1]]}
step={1}
customMarker={SliderMarker}/>
</View>
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<Text style={{fontSize: 14, color: Colors.primaryTextColor, textAlign: 'left'}}>
{this.state.sliderValues[0]}
</Text>
<Text style={{fontSize: 14, color: Colors.primaryTextColor , textAlign: 'right'}}>
{this.state.sliderValues[1]}
</Text>
</View>
</View>
)
}
}
The markers are in the different positions now, (not 0,0) when I load the component now (after receiving updated props from componentWillReceiveProps). They seem to be at 0 and 3/4, but they should be at the max and min. When I try to move any of them onChangeValues
seems to be passing a null value for the marker and then it breaks everything. Not sure why yet. Thoughts?
from react-native-multi-slider.
Well there has been no use of floats yet, and you can still mimic floats by making sure the range in the multislider is integers and then making sure to convert from float and back
Aka.
You wanna support 0.00 -> 10.00
Make the slider go from 0-1000
And let 10 convert to 0.10
And 1000 to 10.00
Does that make sense as a workaround?
from react-native-multi-slider.
Yea for sure that workaround makes sense, maybe float support can be added at some point too.
However I'm still not sure why I'm getting a null value from the onValuesChange
prop when moving a marker. Currently investigating ... any ideas?
from react-native-multi-slider.
@ptomasroos There's issues here beyond the floating numbers.
If I set the min max props on first mount of the component to 0,50 and then try to reset min max props to parseInt(7.99) and parseInt(79.99) in ComponentWillReceiveProps, all of my state is correct but the component itself never seems to update. When I drag the marker all the way to the right the max number I can get to is 50, so the new min max is not applied in the component.
This explains why I was getting NaN or null values before, because in my use case the min and max are set to undefined on first loading of the component and then to parseInt(7.99) and parseInt(79.99) when the range is retrieved from the server and componentWillReceiveProps is triggered. If I move the marker it immediately goes to NaN/null and breaks.
So this component doesn't seem to listen for min/max updates after the first mount, can this be fixed?
from react-native-multi-slider.
I found the issue and have submitted this PR:56 please have a look and let me know if it's ok for you.
And actually generally speaking floats do work! Although I think it might be better to use ints as I'm seeing some weirdness with the floats. The main issue however was due to not being able to update the props post first Mount.
from react-native-multi-slider.
Thank you very much. Will check it out tomorrow!
from react-native-multi-slider.
Np thanks for making this component!
from react-native-multi-slider.
Closed because of #56 (comment)
from react-native-multi-slider.
Related Issues (20)
- 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
- Slider is not smooth HOT 4
- 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
- Project still maintained?
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.