Slider 滑块

用于通过滑动来选择合适数值的滑动组件。

基本用法

无默认值

有默认值（非受控）

有固定值（受控）

一般用法

v-model 用法

<template>
  <div :style="{ width: '600px' }">
    <h4>无默认值</h4>
    <i-slider />
    <h4>有默认值（非受控）</h4>
    <i-slider :defaultValue="currentVal" />
    <h4>有固定值（受控）</h4>
    <i-slider :modelValue="currentVal" />
    <h4>一般用法</h4>
    <i-slider :modelValue="currentVal" @change="handleChange" />
    <h4>v-model 用法</h4>
    <i-slider v-model="currentVal" />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const currentVal = ref(30)

const handleChange = (val) => {
  console.log(val)
  currentVal.value = val
}
</script>

禁用状态

通过 disabled 属性控制滑块为禁用状态。

<template>
  <div :style="{ width: '600px' }">
    <i-slider :defaultValue="60" disabled />
  </div>
</template>

自定义边界

通过 max 和 min 属性控制滑块最大值和最小值。

max 设为 10

min 设为 30

同时设置

<template>
  <div :style="{ width: '600px' }">
    <h4>max 设为 10</h4>
    <i-slider :defaultValue="5" :max="10" />
    <h4>min 设为 30</h4>
    <i-slider :defaultValue="60" :min="30" />
    <h4>同时设置</h4>
    <i-slider :defaultValue="100" :max="200" :min="50" />
  </div>
</template>

自定义步长

通过 step 属性控制滑块步长。

step 设为 0.6

step 设为 3

step 设为 10

<template>
  <div :style="{ width: '600px' }">
    <h4>step 设为 0.6</h4>
    <i-slider :defaultValue="60" :step="0.6" />
    <h4>step 设为 3</h4>
    <i-slider :defaultValue="33" :step="3" />
    <h4>step 设为 10</h4>
    <i-slider :defaultValue="50" :step="10" />
  </div>
</template>

纵向滑块

通过 layout 属性控制滑块方向，默认为 horizontal。

无默认值 →

有默认值（非受控）→

有固定值（受控）→

一般用法 →

v-model 用法 →

<template>
  <div class="idesign-demo-block-row vertical" :style="{ height: '200px' }">
    <h4>无默认值 →</h4>
    <i-slider layout="vertical" />
    <h4>有默认值（非受控）→</h4>
    <i-slider layout="vertical" :defaultValue="currentVal" />
    <h4>有固定值（受控）→</h4>
    <i-slider layout="vertical" :modelValue="currentVal" />
    <h4>一般用法 →</h4>
    <i-slider
      layout="vertical"
      :modelValue="currentVal"
      :onChange="handleChange"
    />
    <h4>v-model 用法 →</h4>
    <i-slider layout="vertical" v-model="currentVal" />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const currentVal = ref(30)

const handleChange = (val) => {
  console.log(val)
  currentVal.value = val
}
</script>

范围滑块

通过 range 属性指定为范围滑块，注意 value 的值需为数组，例如 [0, 100]。

<template>
  <div :style="{ width: '600px' }">
    <i-slider range :defaultValue="[30, 90]" />
  </div>
</template>

隐藏数值提示

通过 hideTip 属性隐藏数值提示。

<template>
  <div :style="{ width: '600px' }">
    <i-slider :defaultValue="60" hideTip />
  </div>
</template>

数值提示位置

通过 placement 属性自定义数值提示位置。

<template>
  <div class="idesign-demo-block-row" :style="{ width: '600px' }">
    <i-slider :defaultValue="20" placement="left" />
    <i-slider :defaultValue="40" placement="top" />
    <i-slider :defaultValue="60" placement="right" />
    <i-slider :defaultValue="80" placement="bottom" />
  </div>
</template>

Slider Attributes

属性	说明	类型	默认值
layout	滑块布局方向	`"vertical"〡"horizontal"`	`horizontal`
modelValue / v-model	滑块固定值（受控）	`number〡number[]`	`--`
defaultValue	滑块默认值（非受控）	`number〡number[]`	`--`
disabled	是否禁用滑块	`boolean`	`false`
max	滑块范围最大值	`number`	`100`
min	滑块范围最小值	`number`	`0`
step	步长	`number`	`1`
range	是否为范围滑块	`boolean`	`false`
hideTip	是否隐藏数值提示	`boolean`	`false`
placement	数值提示出现位置	`placementType`	`top`

Slider Events

属性	说明	类型	默认值
change	滑块值变化时触发	`(value: number) => void`	`--`

# Slider 滑块

# 基本用法