Range 区间选择器

区间选择器

组件来源#

API#

滑块控件主要有以下几种类型：单个滑块，和区间选择滑块几种类型。

Range#

属性	说明	类型	默认值
slider	指定Range为单个滑块还是区间滑块	`['single', 'double']`	single
defaultValue	初始值	number or [number, number]
min	最小值	number	0
max	最大值	number	100
disabled	是否禁用	boolean or [false , false]	false
step	步长	number	1
marks	刻度值	object or number	undefined
onChange	改变后的事件, 即拖动停止后的事件	`function(value)`	undefined
onProcess	改变中的事件	`function(value)`	undefined
onProcess	Range改变中触发的事件	function	undefined

代码演示

预览二维码


/** @jsx createElement */
import {createElement, Component} from 'weex-rx';
import { View, Text} from 'nuke-components';
import { Range } from 'nuke';
import {mount} from 'nuke-mounter';


let App = class NukeDemoIndex extends Component {
    constructor() {
        super();

    }

    onChange(value){
        console.log('checked',value);
    } 

    render() {
        return (
           <View>
                <Text>自由无Tips</Text>
                <Range slider="single" min={0} max={100} defaultValue={100} />
                <Text>均分刻度</Text>
                <Range slider="single" min={0} max={100} defaultValue={50} hasTips marks={10} />
                <Text>步长</Text>
                <Range slider="single" min={0} max={100} defaultValue={40} hasTips marks={10} step={10} />
                <Text>范围</Text>
                <Range slider="double" min={0} max={100} defaultValue={[50,80]} hasTips marks={10} step={10} />
                <Text>指定marks和formatter</Text>
                <Range slider="double" min={0} max={100} defaultValue={[25,80]} hasTips
                    formatter="{0}°C"
                    marks={{0: '0°C', 26: '26°C', 37: '37°C', 100: '100°C'}} />
                <Text>disabled</Text>
                <Range slider="single" min={0} max={100} defaultValue={20} disabled marks={20} />
                <Text>指定marks和formatter</Text>
                <Range slider="double" min={0} max={100} defaultValue={[25,80]} hasTips
                    formatter="{0}°C"
                    marks={{0: '0°C', 26: '26°C', 37: '37°C', 100: '100°C'}} />
            </View>
        );
    }
}

mount(<App/>, mountNode);

区间选择器类型

普通区间选择器。