How to create range slider? (react-native)

Question

This is my range slider

But for change values user need to click on this value. How to make, to be able to pull the slider? Thanks.

Answer 1

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>
        )
    }
}

Answer 2

You'll want to use PanResponder. Check out the UIExplorer demo for PanResponder. http://www.reactnative.com/uiexplorer/