Two or more multisliders revert to values={} position on updateState

[RamonAcedoM]

Two or more multisliders revert to values={} position on updateState

[ptomasroos]

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

[ptomasroos]

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.

[ptomasroos]

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.

[RamonAcedoM]

Rookie mistake, i need to rest...

Thanks

[ptomasroos]

Its all right, we all make them!

[AFMW]

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>

[AFMW]

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

[AFMW]

Thank you, It just worked perfectly!
Rookie mistake 🖖