JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<main>
  <input-number :value="n" :min="0" :max="10"></input-number>
</main>

JavaScript

Vue.component('input-number', {
  template: `<input type="number" :value="value" @input="set" @wheel.stop :min="0" :max="max">`,
  props: {
    value: {type: [String, Number]},
    min: {type: Number},
    max: {type: Number},
  },

  methods: {
    set() {
      let newValue = this.$el && this.$el.value;

      if (newValue === "") {
        this.$emit('input', '');
        return;
      }

      this.$emit('input', Number(newValue));

      this.setMax();
      this.setMin();
    },

    setMax() {
      let newValue = this.$el && this.$el.value;

      if (newValue === "") {
        this.$emit('input', '');
        return;
      }

      if (this.max !== undefined && newValue > this.max) {
        this.$el.value = Number(this.max);
        this.$emit('input', Number(this.max));
      }
    },

    setMin: function() {
      let newValue = this.$el && this.$el.value;

      if (newValue === "") {
        this.$emit('input', '');
        return;
      }

      if (this.min !== undefined && newValue < this.min) {
        this.$el.value = Number(this.min);
        this.$emit('input', Number(this.min));
      }
    }
  },
});

new Vue({
  el: 'main',
  data: {
  	n: 5,
  }
})