import{e as s,o as a,G as n}from"./vendor.f7062dc0.js";const t={class:"markdown-body"},l=[n('

Range 区间选择器

介绍

滑动输入条，用于在给定的范围内选择一个值。

安装

import { createApp } from 'vue';\n//vue\nimport { Range } from '@nutui/nutui';\n//taro\nimport { Range } from '@nutui/nutui-taro';\n\nconst app = createApp();\napp.use(Range);\n

代码演示

基础用法

<nut-range v-model="value" @change="onChange"></nut-range>\n

import { ref } from 'vue';\nimport { Toast } from '@nutui/nutui';\n\nexport default {\n  setup() {\n    const value = ref(40);\n    const onChange = (value) => Toast.text('当前值：' + value);\n    return {\n      value,\n      onChange,\n    };\n  },\n};\n

双滑块

<nut-range range v-model="value" @change="onChange"></nut-range>\n

import { ref } from 'vue';\nimport { Toast } from '@nutui/nutui';\n\nexport default {\n  setup() {\n    const value = ref([20, 80]);\n    const onChange = (value) => Toast.text('当前值：' + value);\n    return {\n      value,\n      onChange,\n    };\n  },\n};\n

指定范围

<nut-range v-model="value" :max="10" :min="-10" @change="onChange"></nut-range>\n

设置步长

<nut-range v-model="value" :step="5" @change="onChange"></nut-range>\n

隐藏范围

<nut-range v-model="value" hidden-range @change="onChange"></nut-range>\n

隐藏标签

<nut-range v-model="value" hidden-tag @change="onChange"></nut-range>\n

禁用

<nut-range v-model="value" disabled @change="onChange"></nut-range>\n

自定义样式

<nut-range\n  v-model="value"\n  inactive-color="rgba(163,184,255,1)"\n  button-color="rgba(52,96,250,1)"\n  active-color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%"\n  @change="onChange">\n</nut-range>\n

自定义按钮

<nut-range v-model="value" @change="onChange">\n  <template #button>\n    <div class="custom-button">{{ value }}</div>\n  </template>\n</nut-range>\n\n<style>\n  .custom-button {\n    width: 26px;\n    color: #fff;\n    font-size: 10px;\n    line-height: 18px;\n    text-align: center;\n    background-color: #ee0a24;\n    border-radius: 100px;\n  }\n</style>\n

API

Props

参数	说明	类型	默认值
v-model	当前进度百分比	Number、Number[]	`0`
range	是否开启双滑块模式	Boolean	`false`
max	最大值	Number、String	`100`
min	最小值	Number、String	`0`
step	步长	Number、String	`1`
disabled	是否禁用滑块	Boolean	`false`
hidden-range	是否隐藏范围值	Boolean	`false`
hidden-tag	是否隐藏标签	Boolean	`false`
active-color	进度条激活态颜色	String	`rgba(250, 44, 25, 1)`
inactive-color	进度条非激活态颜色	String	`rgba(255, 163, 154, 1)`
button-color	按钮颜色	String	`rgba(250, 44, 25, 1)`

Events

事件名	说明	回调参数
change	进度变化且结束拖动后触发	value: 当前进度
drag-start	开始拖动时触发	-
drag-end	结束拖动时触发	-

Slots

名称	说明
button	自定义滑动按钮

',33)],p={setup:(n,{expose:p})=>(p({frontmatter:{}}),(n,p)=>(a(),s("div",t,l)))};export{p as default};