# 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 } } }  \`\`\`


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://vuxjs.gitbook.io/vux/biao-dan-zu-jian/range.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.