Easy Customizable Slide To Unlock Component For Vue 3

Install & Download:

# NPM
$ npm i @jsonly/slide-unlock

Description:

An easy and customizable slide to unlock component that can be used to protect users from accidental clicks or protect your web app from bot attacks by requiring the user to slide a button before completing an action.

How to use it:

1. Install and import the SlideUnlock component.

import SlideUnlock from "vue-slide-unlock"

export default {
  components: {
    SlideUnlock
  }
}

2. Add the component to the template.

<slide-unlock
  @completed="complete()"
/>

3. Available props to customize the slide to unlock component.

autoWidth: {
  type: Boolean,
  default: true
},
width: {
  type: Number,
  default: 400
},
height: {
  type: Number,
  default: 60
},
text: {
  type: String,
  default: "slide to unlock"
},
successText: {
  type: String,
  default: "success"
},
circle: {
  type: Boolean,
  default: true
},
disabled: {
  type: Boolean,
  default: false
},
noanimate: {
  type: Boolean,
  default: false
},
name: {
  type: String,
  default: "slideunlock"
},
position: {
  type: Number,
  default: 0
}

4. Reset the state.

this.$refs.vueslideunlock.reset()

Preview:

Changelog:

v0.5.5 (03/21/2024)

• Bugfix

v0.5.4 (03/17/2024)

• Added a new prop where you can pass the slider progress percentage

v0.5.2 (03/04/2024)

• refactor
• bugfix

v0.4.9 (01/19/2024)

• Dependencies upgrade with dependabot’s pull requests

v0.4.8 (10/19/2023)

• update dependencies

v0.4.6 (07/11/2023)

• Added the ability to call the completed state
• Added additional tests for 100% test coverage
• Dependencies and security updates

v0.4.4 (06/13/2023)

• Update

v0.4.2 (03/24/2023)

• Fixed a bug when using multiple instances of components on the same page

v0.4.1 (03/11/2023)

• Update

v0.4.0 (02/22/2023)

• Fixed some bugs with touch events in Firefox