slide-unlock

A JavaScript library that provides sliding unlocking.

Usage

Provide an HTML element as the mount point:

<div id="slider-container"></div>

Introduce scripts and styles, and then create slider applications:

import SlideUnlock from '@kisstar/slide-unlock';
// You can also directly import SCSS files to create different themes
// The example here imports CSS files directly
import '@kisstar/slide-unlock/dist/slide-unlock.css';

const slideUnlock = new SlideUnlock({
  // Options
});

slideUnlock.init();
slideUnlock.mount('#slider-container');

Options

| Configuration item | Type | Explain | Default | | :----------------- | :------- | :-------------------------------- | ------------------------------------- | | width | string | Slider width. | '100%' | | height | string | Slider height. | '100%' | | placeholder | string | Placeholder for slider. | 'Please drag the slider to the right' | | message | string | Text displayed after unlocking. | 'Unlock succeeded' | | success | Function | Callback after unlocking. | | | prefix | string | Prefix for all styles. | 'ks' | | duration | number | Transition time for slider reset. | 500ms |

Development scripts

# runs the app in the development mode
npm start

# verify the code format and syntax in the project
npm run lint

# write a more friendly commit message
npm run commit

License

MIT