CODEWITHSUNDEEP
react-native
hamzaahzam
hamzaahzam

Reputation: 440

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

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;
     }}
/>

Upvotes: 3

Views: 2032

Answers (1)

Buwaneka Sudheera
Buwaneka Sudheera

Reputation: 1417

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.

Upvotes: 4

Related Questions