A slider component for displaying current value and intervals in range.
!> These rich interaction components are based on BindingX feature. Make sure your app install it.
<template> <wxc-slider-bar v-bind="sliderBarCfg"></wxc-slider-bar> </template> <script> import { WxcSliderBar } from 'weex-ui'; export default { components: { WxcSliderBar }, data: () => ({ sliderBarCfg: { length: 400, range: false, min: 0, max: 100, value: 50, defaultValue: 50, disabled: false } }) } </script>
More details can be found in here
Prop | Type | Required | Default | Description |
---|---|---|---|---|
length | Number | N | 500 | bar width |
height | Number | N | 4 | bar height |
range | Boolean | N | false | dual thumb mode |
min | Number | N | 0 | the minimum value the slider can slide to. |
max | Number | N | 100 | the maximum value the slider can slide to |
minDiff | Number | N | 5 | the granularity the slider can step through values. |
value | [Number, Array] | N | 0 | the value of slider |
defaultValue | [Number, Array] | N | 0 | default value |
disabled | Boolean | N | false | if true, the slider will not be interactable. |
invalidColor | String | N | #E0E0E0 | invalid color |
validColor | String | N | #EE9900 | valid color |
disabledColor | String | N | #AAA | disabled color |
selectRange | Array | N | [0, 0] | return value |
blockColor | String | N | #FFFFFF | block color |
@updateValue="updateValue" @wxcSliderBarTouchEnd="wxcSliderBarTouchEnd"