> For the complete documentation index, see [llms.txt](https://vuxjs.gitbook.io/vux/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vuxjs.gitbook.io/vux/biao-dan-zu-jian/range.md).

# Range

## Props

| 参数                  | 说明             | 类型      | 默认值   |
| ------------------- | -------------- | ------- | ----- |
| decimal             | 可选，是否开启小数支持    | Boolean | false |
| value               | 可选，当前选择值       | Number  | 0     |
| min                 | 可选，取值范围最小值     | Number  | 0     |
| max                 | 可选，取值范围最大值     | Number  | 100   |
| min-html            | 可选，最小值定制内容     | String  | 无     |
| max-html            | 可选，最大值定制内容     | String  | 无     |
| step                | 可选，滑动步长        | Number  | 0     |
| disabled            | 可选，是否为禁止状态     | Boolean | false |
| disabled-opacity    | 可选，禁止状态下控件的透明度 | Number  | 0.75  |
| range-bar-height    | 可选，状态条的高度      | Number  | 1     |
| range-handle-height | 可选，滑柄位置        | Number  | 30    |

## Demo

### 基本使用

\`\`\` vux width=100% height=220px components=Group,Cell,Range

&#x20;\</template>

&#x20;export default { data () { return { value1: 0, value2: 0, value3: 20 } } }&#x20;

````
### 设置起始值和最大值

``` vux width=100% height=210px components=Group,Cell,Range

<template>
<group>
  <cell title="min=8" :inline-desc="'value is: '+value1" primary="content">
    <range slot="value" :value.sync="value1" :min=8></range>
  </cell>
  <cell title="max=88" :inline-desc="'value is: '+value2" primary="content">
    <range slot="value" :value.sync="value2" :max=88></range>
  </cell>
  <cell title="min and max" :inline-desc="'value is: '+value3" primary="content">
    <range slot="value" :value.sync="value3" :min=7 :max=77></range>
  </cell>
</group>
</template>
<script>
export default {
  data () {
    return {
      value1: 25,
      value2: 25,
      value3: 25
    }
  }
}
</script>
````

### 自定义步长

\`\`\` vux width=100% height=100px components=Group,Cell,Range

&#x20;\</template>

&#x20;export default { data () { return { value: 25 } } }&#x20;

````
### 禁用组件

``` vux width=100% height=150px components=Group,Cell,Range

<template>
  <group>
    <cell title="disabled=true" :inline-desc="'valus is: '+value1" primary="content">
      <range slot="value" :value.sync="value1" disabled></range>
    </cell>
    <cell title="Opacity" :inline-desc="'valus is: '+value2" primary="content">
      <range slot="value" :value.sync="value2" disabled :disabled-opacity=0.1></range>
    </cell>
  </group>
</template>
<script>
export default {
  data () {
    return {
      value1: 25,
      value2: 25
    }
  }
}
</script>
````

### 设置bar的高度和手柄的位置

\`\`\` vux width=100% height=150px components=Group,Cell,Range

&#x20;\</template>

&#x20;export default { data () { return { value: 25 } } }&#x20;

````
### 自定义初始值和最大值

``` vux width=100% height=150px components=Group,Cell,Range

<template>
<group>
  <cell title="文字大小" :inline-desc="'font size: ' + value1" primary="content">
    <range slot="value" :value.sync="value1" :min="12" :max="22" min-HTML="<span style='font-size:12px;'>小</span>" max-HTML="<span style='font-size:22px;'>大</span>"></range>
  </cell>
  <cell title="bcontentness" :inline-desc="'value is: ' + value2 + '%'" primary="content">
    <range slot="value" :value.sync="value2" min-HTML="<span style='font-size:16px;color:#F90;'>☼</span>" max-HTML="<span style='font-size:30px;color:#F90;'>☼</span>"></range>
  </cell>
</group>
</template>
<script>
export default {
  data () {
    return {
      value1: 14,
      value2: 25
    }
  }
}
</script>
````

### 双向绑定

\`\`\` vux width=100% height=150px components=Group,Cell,Range

&#x20;\</template>

&#x20;export default { data () { return { value: 0 } } }  \`\`\`