QSlider 滑动选择范围组件 >=v1.0.0

这不是一个受约束的组件。也就是说，如果你不更新值，在用户操作后，这个组件也不会还原到初始值。

Slider

属性

thumbSize { number }

滑块大小。

maximumTrackTintColor { string }

滑块右侧轨道的颜色。默认为蓝色。

minimumTrackTintColor { string }

滑块左侧轨道的颜色。默认为蓝色。

maximumValue { number }

滑块的最大值（当滑块滑到最右端时表示的值）。默认为1。

minimumValue { number }

滑块的最小值（当滑块滑到最左端时表示的值）。默认为0。

step { number }

滑块的最小步长。这个值应该在0到(maximumValue - minimumValue)之间。默认值为0。

value { number }

滑块的初始值。这个值应该在最小值和最大值之间。默认值是0。

onValueChange { function }

(value) => void

在用户拖动滑块的过程中不断调用此回调。

方法参数:

参数名 类型 描述 版本
value number 当前的值

onSlidingComplete { function }

(value) => void

用户结束滑动的时候调用此回调。

方法参数:

参数名 类型 描述 版本
value number 当前的值
示例

import React, {Component, StyleSheet, View, Text, Slider} from 'qunar-react-native'

class SliderExampleItem extends Component {
    constructor(props) {
        super(props)

        this.state = {
            sliderValue: 0
        }
    }
    render() {
        const {step, minimumValue, maximumValue} = this.props

        return (
            <View>
                <Text style={styles.valueText}>{this.state.sliderValue}</Text>
                <Slider
                    step={step}
                    value={this.state.sliderValue}
                    minimumValue={minimumValue}
                    maximumValue={maximumValue}
                    onValueChange={this.onValueChange.bind(this)}
                    onSlidingComplete={this.onSlidingComplete.bind(this)}
                />
            </View>
        )
    }
    onValueChange(v) {
        this.setState({
            sliderValue: v
        })
    }
    onSlidingComplete(v) {
        console.log(v)
    }
}

const styles = StyleSheet.create({
    valueText: {
        marginBottom: 12,
        textAlign: 'center',
    }
});

module.exports = {
    title: 'Slider',
    scroll: true,
    examples: [{
        subtitle: 'Default settings',
        render: () => {
            return <SliderExampleItem/>
        }
    }, {
        subtitle: 'minimumValue: -1, maximumValue: 2',
        render: () => {
            return <SliderExampleItem minimumValue={0} maximumValue={24} step={1}/>
        }
    }, {
        subtitle: 'step: 0.25',
        render: () => {
            return <SliderExampleItem step={0.25}/>
        }
    }]