---
title: "SlideVerify"
description: "A smooth slide-to-verify component."
canonical_url: "https://nuxt.mhaibaraai.cn/en/docs/components/slide-verify"
---
# SlideVerify

> A smooth slide-to-verify component.

## Introduction

`MSlideVerify` is a slide-to-verify component with drag interaction and state transition animations. Built on `motion-v` for smooth transitions, it is suitable for form verification, sensitive operation confirmation, and similar scenarios.

> [!NOTE]
> 
> Uses the 
> 
> Motion
> 
>  animation library for drag interaction and state transition animations

## Usage

Hold and drag the slider to the right to reach the threshold and pass verification:

```vue
<script setup lang="ts">
const value = ref(false)
</script>

<template>
  <MSlideVerify />
</template>
```

### `threshold` Pass Threshold

`threshold` determines the drag ratio required to pass. Defaults to `0.9`. Lowering it relaxes the requirement:

```vue
<template>
  <MSlideVerify :threshold="0.5" text="Drag halfway to pass" />
</template>
```

### `text` Hint Text

`text` sets the hint before verification; `successText` sets the text displayed after passing:

```vue
<template>
  <MSlideVerify text="Hold and drag right" success-text="Human verification passed" />
</template>
```

### `icon` Slider Icon

`icon` sets the icon before verification; `successIcon` sets the icon displayed after passing:

```vue
<template>
  <MSlideVerify icon="i-lucide-arrow-right" success-icon="i-lucide-shield-check" />
</template>
```

### `size` Size

Use `size` to adjust the component size:

```vue
<template>
  <MSlideVerify size="md" />
</template>
```

### `disabled` Disabled State

`disabled` freezes the slider. The cursor cannot drag and the unverified state is preserved:

```vue
<template>
  <MSlideVerify disabled />
</template>
```

## Examples

### Inheriting Field Context

When placed inside `UFormField`, it receives field size and error state, and the slider renders according to the form state:

```vue
<template>
  <UFormField label="Slide Verification" size="xs" error="Example error state">
    <MSlideVerify />
  </UFormField>
</template>
```

### Inside `UFieldGroup`

When combined with a reset button, they share the `UFieldGroup` size. The slider area and button maintain a unified height:

```vue
<template>
  <UFieldGroup size="xs">
    <MSlideVerify class="flex-1" />
    <UButton icon="i-lucide-rotate-ccw" color="neutral" variant="subtle" />
  </UFieldGroup>
</template>
```

### Custom Slider Content

The `slider` slot takes over the slider's inner rendering. Read `verified` and `progress` to dynamically display progress:

```vue [ComponentsSlideVerifySliderSlotExample.vue]
<script setup lang="ts">
const isVerified = ref(false)
</script>

<template>
  <MSlideVerify v-model="isVerified" class="w-sm">
    <template #slider="{ verified, progress }">
      <UIcon v-if="verified" name="i-lucide-check" />
      <span v-else class="text-xs font-medium">{{ Math.round(progress * 100) }}%</span>
    </template>
  </MSlideVerify>
</template>
```

### Event Callbacks

Drag start fires `dragStart`. Releasing fires `dragEnd` with a success boolean. Reaching the threshold additionally fires `success`:

```vue [ComponentsSlideVerifyEventsExample.vue]
<script setup lang="ts">
const isVerified = ref(false)
const slideVerifyRef = useTemplateRef('slideVerifyRef')
const toast = useToast()

function handleSuccess() {
  toast.add({
    title: '验证成功',
    description: '已触发 success 事件',
    color: 'success'
  })
}

function handleDragEnd(success: boolean) {
  if (!success) {
    toast.add({
      title: '验证失败',
      description: '请继续滑动',
      color: 'neutral'
    })
  }
}

function handleReset() {
  slideVerifyRef.value?.reset()
  toast.add({
    title: '已重置',
    color: 'neutral'
  })
}
</script>

<template>
  <div class="w-sm flex gap-4">
    <MSlideVerify
      ref="slideVerifyRef"
      v-model="isVerified"
      class="flex-1"
      @success="handleSuccess"
      @drag-end="handleDragEnd"
    />
    <UButton
      size="sm"
      color="neutral"
      variant="outline"
      @click="handleReset"
    >
      重置验证
    </UButton>
  </div>
</template>
```

## API

### Props

```ts
/**
 * Props for the MSlideVerify component
 */
interface MSlideVerifyProps {
  id?: string | undefined;
  name?: string | undefined;
  /**
   * 尺寸大小
   * @default 'md'
   */
  size?: "md" | "xs" | "sm" | "lg" | "xl" | undefined;
  /**
   * 是否禁用
   */
  disabled?: boolean | undefined;
  /**
   * 待滑动时的提示文本
   * @default '请向右滑动验证'
   */
  text?: string | undefined;
  /**
   * 验证成功时的提示文本
   * @default '验证成功'
   */
  successText?: string | undefined;
  /**
   * 滑块图标
   * @default 'i-lucide-chevrons-right'
   */
  icon?: any;
  /**
   * 验证成功时的图标
   * @default 'i-lucide-check'
   */
  successIcon?: any;
  /**
   * 完成验证所需的阈值百分比（0-1）
   * @default 0.9
   */
  threshold?: number | undefined;
  ui?: Record<string, C> & { root?: SlotClass; track?: SlotClass; fill?: SlotClass; text?: SlotClass; slider?: SlotClass; icon?: SlotClass; } | undefined;
  /**
   * @default false
   */
  modelValue?: boolean | undefined;
}
```

### Emits

```ts
/**
 * Emitted events for the MSlideVerify component
 */
interface MSlideVerifyEmits {
  update:modelValue: (payload: [value: boolean]) => void;
  success: (payload: []) => void;
  dragStart: (payload: []) => void;
  dragEnd: (payload: [success: boolean]) => void;
}
```

### Slots

```ts
/**
 * Slots for the MSlideVerify component
 */
interface MSlideVerifySlots {
  slider(): any;
}
```

### Expose

You can access the typed component instance via [`useTemplateRef`](https://vuejs.org/api/composition-api-helpers.html#usetemplateref).

| Name | Type |
| --- | --- |
| `reset()` | `Promise<void>` <br> Reset the verification state |

## Theme

<component-theme>



</component-theme>

## Changelog

See commit history for [src/runtime/components/slide-verify/SlideVerify.vue](https://github.com/mhaibaraai/movk-nuxt/commits/main/src/runtime/components/slide-verify/SlideVerify.vue).


## Sitemap

See the full [sitemap](https://nuxt.mhaibaraai.cn/sitemap.md) for all pages.