A vue numeric input using a seven segment display inspired by Sevenseg.js from https://github.com/BrandonLWhite/sevenSeg.js

Usage no npm install needed!

<script type="module">
  import vInputSevenseg from 'https://cdn.skypack.dev/v-input-sevenseg';



Vue input numeric input component that uses a a Seven Segment Display

Compile UMD javascript library that can be included on a web page

yarn build-lib

Compile example vue app that uses the component

yarn serve

Project setup (have not checked if this works)

npm install --save vue-input-sevenseg


Use up/down arrow keys to increment value by step size
Use shift-up arrow or shift-down arrow to multiply or divide step size by 10
Use mouse wheel to increment value
Look in the files ex1.html, ex2.html or ex_ff.html for firefox for examples.\

Example of parameters for component:

<v-input-sevenseg v-model="variable" color-back="transparent" color-on="green" color-off="rgb(255, 240, 255)" height=80 digits=7 slant=10 buttons=false></v-input-sevenseg>


  • variable name, seems like it can actually be a number as well
  • Use this parameter to bind it to a javascript variable


  • String. Default is Red.
  • Color when a segment is on


  • String. Default is rgb(50, 0, 0)
  • Color when a segment is off


  • String. Default is Black
  • Color for the box/background of the display


  • Number. Default is 100
  • Height in pixels of a box the includes the display.


  • Number. Default is 400
  • Width in pixels of a box the includes the display.


  • Number. Default is 4
  • Number of digits in the display


  • Number. Default is undefined
  • Number of digits of precision, positive number after decimal point, negative before decimal point


  • Number. Default 1
  • Step size to increment/decrement using arrow keys or mouse wheel


  • Number. Default is 0
  • Degrees slant of the digits in the display


  • Boolean / String. Default is true
  • Add buttons to the widget to use mouse clicks to increment / decrement the value, hold the nouse button to automatically continue to increase / decrease the number

Things to do:

  • Add ctrl-a, ctrl-e, cut, paste support
  • Add double click support to highlight entire number
  • Add mouse selection capability to number input


This is my second vue project. Any suggestions to improve the code is welcome.

Based on code and instructions from