SpinBox — JavaScript

The markup and data-* options are on the HTML & CSS page. This page covers wiring it up.

Initialize

import { SpinBox } from '@popovandrii/ui-elements'
import '@popovandrii/ui-elements/style.css'

const spin = new SpinBox()

// Scope the scan to a subtree (e.g. inside a single component):
// new SpinBox({}, false, { root: document.querySelector('#panel')! })

Events

Each change dispatches a bubbling ui-spinbox-change CustomEvent:

document.addEventListener('ui-spinbox-change', (e) => {
  const { id, value } = (e as CustomEvent).detail
  console.log(id, value)
})

Programmatic API

const el = document.querySelector('.UIsp')!

spin.setValue(el, 3.14)                       // clamps, syncs buttons, emits
spin.setValue(el, 3.14, { silent: true })     // no event (bulk form fill)
spin.refresh(el)                              // re-sync buttons to input value
spin.destroy()                                // unbind everything
spin.scan()                                   // (re)bind newly added markup

Usage with Vue

The live demo on the HTML & CSS page is a Vue component using the library. The full pattern — observe for dynamic lists, a reusable composable, reactive destroy() → scan() re-init — is in the Usage with Vue guide.