<view class="page">
    <view class="page__hd">
        <view class="page__title">Slider</view>
        <view class="page__desc">滑动选择器</view>
    </view>
    <view class="page__bd page__bd_spacing">
    	<view class="sub-title">Default</view>
    	<wux-slider defaultValue="{{ [10] }}" />
        <view class="sub-title">Custom tip</view>
        <wux-slider defaultValue="{{ [10] }}" tipFormatter="{d} %" />
        <view class="sub-title">No tip</view>
        <wux-slider defaultValue="{{ [10] }}" tipFormatter="" />
    	<view class="sub-title">Disabled</view>
    	<wux-slider defaultValue="{{ [10] }}" disabled />
    	<view class="sub-title">Show value</view>
    	<wux-slider defaultValue="{{ [10] }}" showValue />
        <view class="sub-title">Use icons</view>
        <wux-slider defaultValue="{{ [10] }}">
            <wux-icon wux-class="min" type="ios-volume-mute" slot="min" />
            <wux-icon wux-class="max" type="ios-volume-high" slot="max" />
        </wux-slider>
    	<view class="sub-title">Step = 10</view>
    	<wux-slider defaultValue="{{ [10] }}" showValue step="10" />
    	<view class="sub-title">Show mark</view>
        <wux-slider defaultValue="{{ [100] }}" showMark step="25" markStyle="background-color: red" />
        <wux-slider defaultValue="{{ [100] }}" showMark step="25" markStyle="{{ ['background-color: red', 'background-color: yellow', 'background-color: blue'] }}" />
        <view class="sub-title">Min and max</view>
    	<wux-slider defaultValue="{{ [12] }}" showValue step="11" min="0" max="88" />
    	<view class="sub-title">Controlled</view>
    	<wux-slider value="{{ value }}" controlled bind:change="onChange" bind:afterChange="afterChange" />
        <view class="sub-title">Custom style</view>
        <wux-slider defaultValue="{{ [10] }}" railStyle="background-color: blue" trackStyle="background-color: red" handleStyle="background-color: yellow" />
        <wux-slider defaultValue="{{ [10, 30, 50] }}" railStyle="background-color: blue" trackStyle="{{ ['background-color: red', 'background-color: yellow'] }}" handleStyle="{{ ['background-color: yellow', 'background-color: red', 'background-color: blue'] }}" />
    	<view class="sub-title">Range = 2</view>
        <wux-slider defaultValue="{{ [10, 30] }}" />
        <view class="sub-title">Range = 3</view>
        <wux-slider defaultValue="{{ [10, 30, 50] }}" />
    </view>
</view>
