import{c as t,f as e,t as d,B as n,o}from"./vendor.36ea9f7d.js";const a={class:"markdown-body"},r=n('

Range组件

介绍

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

安装

import { createApp } from 'vue';\nimport { Range } from '@nutui/nutui';\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

自定义按钮

',25),u={class:"language-html"},l=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	自定义滑动按钮

",7),g={expose:[],setup:n=>(n,g)=>(o(),t("div",a,[r,e("pre",null,[e("code",u,'\n \n\n\n\n",1)]),l]))};export default g;