How to create range slider? (react-native)

If I were you, without any doubt, I'd search for a library to do the heavy lifting for me.

Assuming you need cross-platform (iOS and Android) range slider solution, based on my research by the time of writing this answer, the plugin which gave the best results in terms of performance on both platforms and customizability options is @ptomasroos/react-native-multi-slider.

It lacks good documentation, but there is example available. Here's the basic set-up:

import React from 'react';
import { View, Text } from 'react-native';
import MultiSlider from '@ptomasroos/react-native-multi-slider';

class RangeSlider extends React.Component {
    state = {
        values: [3, 7],
    };

    multiSliderValuesChange = (values) => {
        this.setState({
            values,
        });
    }

    render() {
        return (
            <View>
                <MultiSlider
                    values={[this.state.values[0], this.state.values[1]]}
                    sliderLength={280}
                    onValuesChange={this.multiSliderValuesChange}
                    min={0}
                    max={10}
                    step={1}
                />
                <Text style={styles.text}>Two Markers:</Text>
                <Text style={styles.text}>{this.state.values[0]}</Text>
                <Text style={styles.text}>{this.state.values[1]}</Text>
            </View>
        )
    }
}

The creator of react-native-range-slider is here!

You can use this module which is implemented natively and then ported to react-native, thus the great performance and smooth animation.

here is an example:

import RangeSlider from 'react-native-range-slider'

<View style={{flex: 1, flexDirection: 'row'}}>
  <RangeSlider
    minValue={0}
    maxValue={100}
    tintColor={'#da0f22'}
    handleBorderWidth={1}
    handleBorderColor="#454d55"
    selectedMinimum={20}
    selectedMaximum={40}
    style={{ flex: 1, height: 70, padding: 10, backgroundColor: '#ddd' }}
    onChange={ (data)=>{ console.log(data);} }
  />
</View>

The only limitation and downside here is that it is only for iOS(currently).