MultiSlider min, max and values props cannot be reset after first Mount

[ptomasroos]

MultiSlider min, max and values props cannot be reset after first Mount

[rtman]

@ptomasroos Hey can you have a look at this when you get a minute?

[ptomasroos]

I will ! Hopefully during next week @rtman sorry for keeping it hanging

[rtman]

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.

[ptomasroos]

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?

[ptomasroos]

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

[ptomasroos]

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

[rtman]

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?

[ptomasroos]

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?

[rtman]

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?

[rtman]

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

[rtman]

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.

[ptomasroos]

Thank you very much. Will check it out tomorrow!

[rtman]

Np thanks for making this component!

[ptomasroos]

Closed because of #56 (comment)