lighting-ui/packages/lc-slider-bar/README_cn.md

A rich interaction, lightweight, high performance UI library based on Weex

# lc-slider-bar 

> Weex 滑动选择组件

### 规则
- 用于选择线性取值范围中某个具体的值（整数），或者选取一个取值范围


## [Demo](http://res.lightyy.com/lightui/example/slider-bar/?_wx_tpl=http%3A%2F%2Fres.lightyy.com%2Flightui%2Fexample%2Fslider-bar%2Findex.native.js)

<img src="./slider-bar.png" width="240"/>
<img src="./slider-bar-scan.png" width="160">

## 使用方法

```vue
<template>
  <lc-slider-bar v-bind="sliderBarCfg"></lc-slider-bar>
</template>
<script>
  import { LcSliderBar } from 'weex-ui';
  export default {
  	components: { LcSliderBar },
  	data: () => ({
      sliderBarCfg: {
        length: 400,
        range: false,
        min: 0,
        max: 100,
        value: 50,
        defaultValue: 50,
        disabled: false
      }
  	});
  }
</script>
```

### 可配置参数

| Prop | Type | Required | Default | Description |
|-------------|------------|--------|-----|-----|
| length       | `Number` |`N`| `500`    | 滑条长度 |
| height       | `Number` |`N`| `4`      | 滑条高度 |
| range        | `Boolean` |`N`| `false`  | 是否选择范围 |
| min          | `Number` |`N`| `0`      | 滑条最小值 |
| max          | `Number` |`N`| `100`    | 滑条最大值 |
| minDiff      | `Number` |`N`| `5`      | 选择范围时最小差值（用于避免按钮重合） |
| value        | `[Number, Array]` |`N`| `0` | 设置当前取值|
| defaultValue | `[Number, Array]` |`N`| `0` | 设置初始取值|
| disabled     | `Boolean` |`N`| `false`  | 是否禁用 |
| invalidColor | `String` |`N`| `#E0E0E0`| 无效颜色 |
| validColor   | `String` |`N`| `#EE9900`| 有效颜色 |
| disabledColor| `String` |`N`| `#AAA`   | 禁用颜色 |