How to reset react native rn-range-slider to its initial state

user_13686869 0
Viewed 930

I am using rn-range-slider library for my slider View. After sliding the rn-range-slider I want to reset the slider to its original position I have tried clearing the states but the slider remains unchanged any clue how to resolve this?

<RangeSlider     
     rangeEnabled={true}
     style={{width: '95%', height: 60, bottom: 20}}
     gravity={'center'}
     min={0}
     max={10000}
     step={20}
     selectionColor="#B20C11"
     blankColor="#F2F0F1"
     onValueChanged={(low, high, fromUser) => {
       minValue = low;
       maxValue = high;
     }}
/>
react-native
1 Answers

You have to add high and low properties as well. That's how RangeSlider element is going to identify the values it's assigned. When you change the values of state, those low and high values should be assigned to element's low and high properties.

<RangeSlider
    style={styles.slider}
    min={0}
    max={100}
    step={1}
    floatingLabel
    renderThumb={renderThumb}
    renderRail={renderRail}
    renderRailSelected={renderRailSelected}
    renderLabel={renderLabel}
    renderNotch={renderNotch}
    low={this.state.low}
    high={this.state.high}
    onValueChanged={handleValueChange}
  />

Then when you reset low and high values, component will be re rendered and reset to initial value.

user_65747840
Related