How to Create Custom Number input with increment and decrement buttons with HTML, CSS, JS

Creating Custom Number Input with Increment and Decrement Buttons with HTML, CSS, JavaScript

Step 1: Understand the HTML Structure

Explanation: In this step, we'll understand the HTML structure. There's a div element with the class input-wrapper containing an input element of type number and two button elements with classes btn up and btn down respectively. These buttons are used to increase and decrease the value of the input field.

 
<div class="input-wrapper">
  <input type="number" value="0">
  <button class="btn up" onclick="increaseValueundefined)">+</button>
  <button class="btn down" onclick="decreaseValueundefined)">-</button>
</div>
 

Step 2: Add CSS Styling

Explanation: Here, we'll add CSS styling to customize the appearance of the number input and the buttons. The CSS code provided styles the input field and buttons to make them visually appealing and aligned properly.

 
/* Style the custom number input */
.input-wrapper {
  position: relative;
  display: inline-block; /* Make the wrapper inline-block to keep the buttons next to the input */
}

/* Hide the default number input buttons */
input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
  appearance: textfield; /* Others */
  width: 90px; /* Adjust width as needed */
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.input-wrapper .btn {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 25px; /* Adjust size as needed */
  background-color: orange;
  cursor: pointer;
  border: none;
  border-radius: 0 4px 4px 0;
}

.input-wrapper .btn:hover {
  background-color: #aaa;
}

.input-wrapper .btn.up {
  top: 0;
  bottom: auto;
}

.input-wrapper .btn.down {
  top: auto;
  bottom: 0;
}
 

Step 3: Implement JavaScript Functions

Explanation: This step involves implementing two JavaScript functions: increaseValue() and decreaseValue(). These functions are triggered when the corresponding buttons are clicked. They increase or decrease the value of the input field accordingly.

Step 4: Define increaseValue() Function

Explanation: In this part, we'll define the increaseValue() function. This function retrieves the current value of the input field, increments it by one, and updates the input field with the new value.

 
 function increaseValue() {
  var value = parseInt(document.querySelector('input[type="number"]').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.querySelector('input[type="number"]').value = value;
}


 

Step 5: Define decreaseValue() Function

Explanation: Finally, we'll define the decreaseValue() function. Similar to the previous step, this function retrieves the current value of the input field, decrements it by one, and updates the input field with the new value.

 
 function decreaseValue() {
  var value = parseInt(document.querySelector('input[type="number"]').value, 10);
  value = isNaN(value) ? 0 : value;
  value--;
  document.querySelector('input[type="number"]').value = value;
}
 

Live Example

You can customize the appearance of the increment and decrement buttons (thumbs) for an input of type number by modifying the CSS properties.