预览 二维码

/** @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);

普通区间选择器。