Stenciljs component, equal to , but with 2 buttons. Will show and input like this:
increase and decrease a input value you can use this web component very simple. The component has 3 Props: max(the max value of the input),min(the min value of input) and name(the name of the input). Exampe of use component:
<input-minus-plus min=0 max=17 name='number'/>
npm install https://github.com/marcelopilone/input-minus-plus
simply add in your main app.ts file:
import 'input-min-plus';then u will be able to use the tag in any TSX file
is hosted in npm so you can add the following script in HTML
<html>
<head>
<script type='module' src='https://unpkg.com/input-min-plus@latest/dist/input-min-plus/input-min-plus.esm.js'></script>
</head>
<body>
.....
</body>Like type="number", you can have min. max values
you can change CSS in your proyect doing something like this:
input-minus-plus{
--input-width: 100px;
--btn-width: 5em
}changes input width defaults to "auto
changes left and right button width defaults to "auto
inpluschange
on change throws "inpluschange" event
you can listen to this event:
<input-minus-plus id="my-input" min=0 max=17 name='number'/> const myInput = document.getElementById("my-input");
myInput.addEventListener("inpluschange", (e) => console.log("inpluschange", e))or you can use it this way:
myfunction(e){
console.log("my funcion called", e);
} <input-minus-plus name='number' onInpluschange="myfunction()"/>