Search code examples
react-nativeconsole.lograngeslider

How to get current value of Range Slider in React Native?


Hey I am having trouble getting the current value of the RangeSlider and being able to console.log that value in react native. I used the RangeSlider described here: https://reactnativeexample.com/react-native-range-slider-for-android-and-ios/

When I change the value of the slider, is there a way to console.log the current value that the slider is at? For example on change from 1 to 5 is there a way to log the value 5. I am new to react native and your help is greatly appreciated!

Here is my code for the slider:


      <RangeSlider
        style={{width: 385, height: 120, marginLeft: 15}}
        gravity={'center'}
        min={1}
        max={10}
        step={1}
        lineWidth={6}
        thumbRadius={17.5}
        labelPadding={4}

        rangeEnabled={false}
        thumbBorderWidth={2}
        selectionColor="#3df"
        blankColor="#f618"
        onValueChanged={(low, high, fromUser) => {
            this.setState({rangeLow: low, rangeHigh: high, fromUser})
      }}/>

Here is the link to my current App.js file: https://github.com/SanthoshVelaga/productivityapp/blob/master/App.js


Solution

  • onValueChanged takes a function that is called when the selected value changes. You can put anything you want in there.

    onValueChanged={(low, high, fromUser) => {
       console.log(`The low value is ${low}, the high value is ${high}, it was set by the user is ${fromUser}`);
       this.setState({rangeLow: low, rangeHigh: high, fromUser})
          }}