QinUi

# Range 区间选择器

区间选择器组件

# 基础使用

<template>
  <qinui-range v-model="theValue" />
</template>
<script>
  export default {
    data() {
      return {
        theValue: 24,
      };
    },
  };
</script>

# 显示当前值

:showValue="true"

<template>
  <qinui-range v-model="theValue" showValue />
</template>
<script>
  export default {
    data() {
      return {
        theValue: 24,
      };
    },
  };
</script>

# 自定义范围(100—200)

min="100" max="200"

<template>
  <qinui-range v-model="theValue" min="100" max="200" />
</template>
<script>
  export default {
    data() {
      return {
        theValue: 24,
      };
    },
  };
</script>

# 显示左右值

showLabel labelLeft="我" labelRight="他"

<template>
  <qinui-range
    v-model="theValue"
    showValue
    showLabel
    labelLeft="我"
    labelRight="他"
  />
</template>
<script>
  export default {
    data() {
      return {
        theValue: 24,
      };
    },
  };
</script>

# API

# Props

参数 说明 类型 默认值 可选值
modelValue / v-model 值 String | Number -
min 最小值 String | Number 0 -
max 最大值 String | Number 0 -
step 步长 String | Number 0 -
activeColor 滑块右侧已选择部分的背景色 String var(--qinuiPrimaryColor, #ff361f)
backgroundColor 滑块左侧未选择部分的背景色 String #c0c4cc -
blockSize 滑块的大小，取值范围为 12 - 28 Number 28 12 - 28
blockColor 滑块的颜色 String #ffffff
disabled 禁用状态 Boolean false true | false
showValue 是否显示当前的选择值 Boolean false true | false
valueSuffix 后面的单位 String % -
showLabel 是否显示左右信息 Boolean false true | false
labelLeft 左边上面的文案 String - -
labelRight 右边上面的文案 String - -
diyStyle 自定义样式，某些事件需要用到调整位置等作用 String - -

# Events

事件名 说明 回调参数
@changing 滑动中事件 -
@change 改变事件 -

← Rich 富文本 →