如何创建范围滑块？ （反应天然）

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

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

Answer 3

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