Vue 3 Simple Custom Scroll Picker Spinner Component Plugin

Scroll Picker is a component of the Vue.js 3 mobile picker display that enables the user to select values by spinning the wheels.

vue scroll picker, time picker javascript, wheel style datetime picker component, scrollable date picker jquery, scrolling datepicker html

How to make use of it:

Install and download:

$ npm i vue3-scroll-picker

1. Import the ScrollPicker component.

import ScrollPicker from 'vue3-scroll-picker';

2. Register the component.

const app = createApp(App);
// or
export default {
  components: {

3. Add the ScrollPicker component to the application template.

const myOptions = [
      label: "Option 1-1",
      value: "option11"
      label: "Option 1-2",
      value: "option12"
      label: "Option 2-1",
      value: "option21"
      label: "B2",
      value: "option21"
  // ...
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
  setup() {
    const state = reactive({
      options: emyOptions,
      selections: ['option21','option22'],
    return {

4. All component props.

modelValue: {
  default: [],
  type: Array as PropType<Selection[]>
options: {
  default: [],
  type: Array as PropType<Option[][]>
activeClass: {
  default: "",
  type: String
inactiveClass: {
  default: "",
  type: String
activeStyle: {
  default: "",
  type: String
inactiveStyle: {
  default: "",
  type: String
wheelSpeed: {
  default: 1,
  type: Number


{ label: string; value: string }[][]
yes[]Options use can select.
label value type: label as display, value to emit
label value example: [ [ { label: ‘A1’, value: ‘a1’ }, { label: ‘A2’, value: ‘a2’ } ], [ { label: ‘B1’, value: ‘b1’ } ] ]
string type: same label and value
string type example: [ [ ‘a1’, ‘a2’ ], [ ‘b1’ ] ]
:valueModel | v-modelstring[]yes[]Array value emit
Example: [ ‘a2’, ‘b1’ ]
active-stylestringnocss (change active option style)style
inactive-stylestringnocss (change inactive option style)style
active-classstringnocss class
inactive-classstringnocss class
wheel-speednumberno1adjust mouse wheel speed with this value.
lower wheel speed, slower scroller


@update:modelValueevent emit when use select


v-slot:optionactive: boolean
item: string | { label: string; value: string }
override option card
v-slot:center-overlay override center active option area, able to add separator to active area
v-slot:top-overlay override top inactive option area, able to change the top gradient color
v-slot:bottom-overlay override bottom inactive option area, able to change the bottom gradient color

Mobile Picker View, vue3 scroll picker Plugin/Github

See Demo And Download

Official Website(HJ29): Click Here

This superior jQuery/javascript plugin is developed by HJ29. For extra Advanced usage, please go to the official website.

Related Posts


CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…


Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…


Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…

Leave a Reply

Your email address will not be published. Required fields are marked *