123456789101112131415161718192021222324252627282930313233343536373839 |
- <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>
|