Range组件

介绍

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

安装

import { createApp } from 'vue';
import { Range } from '@nutui/nutui';
const app = createApp();
app.use(Range);

代码演示

基础用法

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

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

双滑块

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

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

指定范围

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

设置步长

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

隐藏范围

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

隐藏标签

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

禁用

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

自定义样式

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

自定义按钮

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

API

Props

Events

Slots