Comments (8)
You set it once, not during re renders when setting a new state object which causes re render.
https://github.com/ptomasroos/react-native-multi-slider/blob/master/example/Example.js#L46 that line is important, feel free to check out the Example project and you will see that two individual sliders can live side by side
from react-native-multi-slider.
There are no values assigned to this.state.valuesSliderArea ?
So how can the component possible render the right state? No it can't thats why it gets re rendered.
from react-native-multi-slider.
Yes, thats because thats how React works.
when you call setState, you're layout will redraw it self. And there for you'll need to preserve the state from both components and use those values in the rendering cycle otherwise those are flushed next time something was rendered.
If you don't want to rerender something then there is no need to call this.setState({...})
rather (data) => { this.heightRange = data; }
Aka this has nothing to do with react-native-multi-slider. Just how state and rendering works.
from react-native-multi-slider.
Rookie mistake, i need to rest...
Thanks
from react-native-multi-slider.
Its all right, we all make them!
from react-native-multi-slider.
But what if I need to update the values in realtime? @ptomasroos
How do you resolved it? @RamonAcedoM
Example:
1. I decrease the "área" section sliding the marker to the left:
2. I decrease the "Precio" section silding the marker to the left and then the position of the "area" slide is reverted to its original position:
The code below is the one I'm using:
constructor(props) {
super(props);
this.state = {
txt_selectPrecio: "Cualquier precio",
txt_selectArea: "Cualquier área",
}
}
setPrecioSlide(values) {
console.log(values)
valoresPrecio = ["$0","$100.000.000","$200.000.000","$300.000.000","$400.000.000","$500.000.000","$600.000.000",
"$700.000.000","$800.000.000","$900.000.000","$1.000.000.000","$1.500.000.000","$2.000.000.000",
"$2.500.000.000","$3.000.000.000","$3.500.000.000","$4.000.000.000","$4.500.000.000",
"$5.000.000.000","$5.500.000.000","$6.000.000.000","$6.500.000.000","$7.000.000.000","$7.500.000.000","$8.000.000.000"]
var inicio=values[0]
var fin=values[1]
var arrayPrecios=[valoresPrecio[inicio],valoresPrecio[fin]]
console.log(arrayPrecios)
json_inmuebles.body.pmin = parseInt((arrayPrecios[0]).replace("$","").split(".").join(""));
json_inmuebles.body.pmax = parseInt((arrayPrecios[1]).replace("$","").split(".").join(""));
precioMinSlider = this.abbrNum(json_inmuebles.body.pmin,2)
precioMaxSlider = this.abbrNum(json_inmuebles.body.pmax,2)
this.setState({txt_selectPrecio:"$"+precioMinSlider+" a $"+precioMaxSlider})
}
setAreaSlide(values){
valoresArea= ["0 m²","20 m²","40 m²","60 m²","80 m²","100 m²","150 m²","200 m²","300 m²","400 m²","500 m²","600 m²","700 m²","800 m²","900 m²","1000 m²","1300 m²"]
console.log(values)
var inicio=values[0]
var fin=values[1]
var arrayArea=[valoresArea[inicio],valoresArea[fin]]
console.log(arrayArea)
json_inmuebles.body.amin = parseInt((arrayArea[0]).replace("$","").split(".").join(""));
json_inmuebles.body.amax = parseInt((arrayArea[1]).replace("$","").split(".").join(""));
areaMinSlider = valoresArea[inicio]
areaMaxSlider = valoresArea[fin]
this.setState({txt_selectArea:areaMinSlider+" a "+areaMaxSlider})
}
<View style={{borderBottomWidth:1,borderColor:'#f3f3f5',marginTop:25}}>
<Text allowFontScaling={false} style={styles.titulos_filtros}>Rango de precio</Text>
<Text allowFontScaling={false} style={{
textAlign:'center',
marginTop:5,
fontSize:16,
fontFamily:'NunitoSans-Regular',
color:'#596471'}}>{this.state.txt_selectPrecioArriendo}</Text>
<View style={{ alignItems:'center', marginTop:25}}>
<MultiSlider
values={this.state.valuesSliderPrecio}
min={0}
max={24}
selectedStyle={{backgroundColor:'#008dde'}}
sliderLength={width.width-80}
onValuesChange={(values)=>{ this.setPrecioSlide(values) }}
/>
</View>
</View>
<View style={{borderBottomWidth:1,borderColor:'#f3f3f5',marginTop:25}}>
<Text allowFontScaling={false} style={styles.titulos_filtros}>Rango de área</Text>
<Text allowFontScaling={false} style={{textAlign:'center', marginTop:5,fontSize:16,fontFamily:'NunitoSans-Regular',color:'#596471'}}>{this.state.txt_selectArea}</Text>
<View style={{ alignItems:'center', marginTop:25}}>
<MultiSlider
values={this.state.valuesSliderArea}
min={0}
max={16}
selectedStyle={{backgroundColor:'#008dde'}}
sliderLength={width.width-80}
onValuesChange={(values)=>{ this.setAreaSlide(values) }}
/>
</View>
</View>
from react-native-multi-slider.
@ptomasroos I assigned the values and it still gets re rendered.
I send you the modified code:
...
constructor(props) {
super(props);
this.state = {
txt_selectPrecio: "Cualquier precio",
txt_selectArea: "Cualquier área",
valuesSliderPrecio:[0,24],
valuesSliderArea:[0,17],
}
}
...
setPrecioSlide(values) {
console.log(values)
valoresPrecio = ["$0","$100.000.000","$200.000.000","$300.000.000","$400.000.000","$500.000.000","$600.000.000",
"$700.000.000","$800.000.000","$900.000.000","$1.000.000.000","$1.500.000.000","$2.000.000.000",
"$2.500.000.000","$3.000.000.000","$3.500.000.000","$4.000.000.000","$4.500.000.000",
"$5.000.000.000","$5.500.000.000","$6.000.000.000","$6.500.000.000","$7.000.000.000","$7.500.000.000","$8.000.000.000"]
var inicio=values[0]
var fin=values[1]
var arrayPrecios=[valoresPrecio[inicio],valoresPrecio[fin]]
console.log(arrayPrecios)
json_inmuebles.body.pmin = parseInt((arrayPrecios[0]).replace("$","").split(".").join(""));
json_inmuebles.body.pmax = parseInt((arrayPrecios[1]).replace("$","").split(".").join(""));
precioMinSlider = this.abbrNum(json_inmuebles.body.pmin,2)
precioMaxSlider = this.abbrNum(json_inmuebles.body.pmax,2)
this.setState({txt_selectPrecio:"$"+precioMinSlider+" a $"+precioMaxSlider})
}
setAreaSlide(values){
valoresArea= ["0 m²","20 m²","40 m²","60 m²","80 m²","100 m²","150 m²","200 m²","300 m²","400 m²","500 m²","600 m²","700 m²","800 m²","900 m²","1000 m²","1300 m²"]
console.log(values)
var inicio=values[0]
var fin=values[1]
var arrayArea=[valoresArea[inicio],valoresArea[fin]]
console.log(arrayArea)
json_inmuebles.body.amin = parseInt((arrayArea[0]).replace("$","").split(".").join(""));
json_inmuebles.body.amax = parseInt((arrayArea[1]).replace("$","").split(".").join(""));
areaMinSlider = valoresArea[inicio]
areaMaxSlider = valoresArea[fin]
this.setState({txt_selectArea:areaMinSlider+" a "+areaMaxSlider})
}
<View style={{borderBottomWidth:1,borderColor:'#f3f3f5',marginTop:25}}>
<Text allowFontScaling={false} style={styles.titulos_filtros}>Rango de precio</Text>
<Text allowFontScaling={false} style={{
textAlign:'center',
marginTop:5,
fontSize:16,
fontFamily:'NunitoSans-Regular',
color:'#596471'}}>{this.state.txt_selectPrecioArriendo}</Text>
<View style={{ alignItems:'center', marginTop:25}}>
<MultiSlider
values={this.state.valuesSliderPrecio}
min={0}
max={24}
selectedStyle={{backgroundColor:'#008dde'}}
sliderLength={width.width-80}
onValuesChange={(values)=>{ this.setPrecioSlide(values) }}
/>
</View>
</View>
<View style={{borderBottomWidth:1,borderColor:'#f3f3f5',marginTop:25}}>
<Text allowFontScaling={false} style={styles.titulos_filtros}>Rango de área</Text>
<Text allowFontScaling={false} style={{textAlign:'center', marginTop:5,fontSize:16,fontFamily:'NunitoSans-Regular',color:'#596471'}}>{this.state.txt_selectArea}</Text>
<View style={{ alignItems:'center', marginTop:25}}>
<MultiSlider
values={this.state.valuesSliderArea}
min={0}
max={16}
selectedStyle={{backgroundColor:'#008dde'}}
sliderLength={width.width-80}
onValuesChange={(values)=>{ this.setAreaSlide(values) }}
/>
</View>
</View>
from react-native-multi-slider.
Thank you, It just worked perfectly!
Rookie mistake 🖖
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.