If you want to take a numeric input from the user on website, Then this cool Custom input number will best for you. You can use the plus and minus sign to increase or decrease the number. Designed by Dmitry.
Custom input number
HTML / Haml
[code language=”html”]
.ctrl
.ctrl__button.ctrl__button–decrement –
.ctrl__counter
%input.ctrl__counter-input{type: "text", value: "0", maxlength: "10"}
.ctrl__counter-num 0
.ctrl__button.ctrl__button–increment +
[/code]
CSS / Sass
[code language=”css”]
*
user-select: none
box-sizing: border-box
html,
body
height: 100%
body
display: flex
align-items: center
justify-content: center
background-color: #EDF1F6
appearance: none !important
backface-visibility: hidden
-webkit-font-smoothing: antialiased
-moz-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
-webkit-overflow-scrolling: touch
text-rendering: optimizelegibility
.ctrl
flex: 0 0 auto
display: flex
align-items: center
border-bottom: 1px solid #D5DCE6
background-color: #fff
border-radius: 5px
font-size: 30px
&__counter
position: relative
width: 200px
height: 100px
color: #333C48
text-align: center
overflow: hidden
&.is-input
.ctrl__counter-num
visability: hidden
opacity: 0
transition: opacity 100ms ease-in
.ctrl__counter-input
visability: visible
opacity: 1
transition: opacity 100ms ease-in
&-input
width: 100%
margin: 0
padding: 0
position: relative
z-index: 2
box-shadow: none
outline: none
border: none
color: #333C48
font-size: 30px
line-height: 100px
text-align: center
visability: hidden
opacity: 0
transition: opacity 100ms ease-in
&-num
position: absolute
z-index: 1
top: 0
left: 0
right: 0
bottom: 0
line-height: 100px
visability: visible
opacity: 1
transition: opacity 1000ms ease-in
&.is-increment-hide
opacity: 0
transform: translateY(-50px)
animation: increment-prev 100ms ease-in
&.is-increment-visible
opacity: 1
transform: translateY(0)
animation: increment-next 100ms ease-out
&.is-decrement-hide
opacity: 0
transform: translateY(50px)
animation: decrement-prev 100ms ease-in
&.is-decrement-visible
opacity: 1
transform: translateY(0)
animation: decrement-next 100ms ease-out
&__button
width: 100px
line-height: 100px
text-align: center
color: #fff
cursor: pointer
background-color: #8498a7
transition: background-color 100ms ease-in
&:hover
background-color: mix(#8498a7, #fff, 90%)
transition: background-color 100ms ease-in
&:active
background-color: mix(#8498a7, #000, 90%)
transition: background-color 100ms ease-in
&–decrement
border-radius: 5px 0 0 5px
&–increment
border-radius: 0 5px 5px 0
// keyframes
@keyframes decrement-prev
from
opacity: 1
transform: translateY(0)
@keyframes decrement-next
from
opacity: 0
transform: translateY(-50px)
@keyframes increment-prev
from
opacity: 1
transform: translateY(0)
@keyframes increment-next
from
opacity: 0
transform: translateY(50px)
[/code]
JS
[code language=”JS”]
(function() {
‘use strict’;
function ctrls() {
var _this = this;
this.counter = 0;
this.els = {
decrement: document.querySelector(‘.ctrl__button–decrement’),
counter: {
container: document.querySelector(‘.ctrl__counter’),
num: document.querySelector(‘.ctrl__counter-num’),
input: document.querySelector(‘.ctrl__counter-input’)
},
increment: document.querySelector(‘.ctrl__button–increment’)
};
this.decrement = function() {
var counter = _this.getCounter();
var nextCounter = (_this.counter > 0) ? –counter : counter;
_this.setCounter(nextCounter);
};
this.increment = function() {
var counter = _this.getCounter();
var nextCounter = (counter < 9999999999) ? ++counter : counter;
_this.setCounter(nextCounter);
};
this.getCounter = function() {
return _this.counter;
};
this.setCounter = function(nextCounter) {
_this.counter = nextCounter;
};
this.debounce = function(callback) {
setTimeout(callback, 100);
};
this.render = function(hideClassName, visibleClassName) {
_this.els.counter.num.classList.add(hideClassName);
setTimeout(function() {
_this.els.counter.num.innerText = _this.getCounter();
_this.els.counter.input.value = _this.getCounter();
_this.els.counter.num.classList.add(visibleClassName);
}, 100);
setTimeout(function() {
_this.els.counter.num.classList.remove(hideClassName);
_this.els.counter.num.classList.remove(visibleClassName);
}, 1100);
};
this.ready = function() {
_this.els.decrement.addEventListener(‘click’, function() {
_this.debounce(function() {
_this.decrement();
_this.render(‘is-decrement-hide’, ‘is-decrement-visible’);
});
});
_this.els.increment.addEventListener(‘click’, function() {
_this.debounce(function() {
_this.increment();
_this.render(‘is-increment-hide’, ‘is-increment-visible’);
});
});
_this.els.counter.input.addEventListener(‘input’, function(e) {
var parseValue = parseInt(e.target.value);
if (!isNaN(parseValue) && parseValue >= 0) {
_this.setCounter(parseValue);
_this.render();
}
});
_this.els.counter.input.addEventListener(‘focus’, function(e) {
_this.els.counter.container.classList.add(‘is-input’);
});
_this.els.counter.input.addEventListener(‘blur’, function(e) {
_this.els.counter.container.classList.remove(‘is-input’);
_this.render();
});
};
};
// init
var controls = new ctrls();
document.addEventListener(‘DOMContentLoaded’, controls.ready);
})();
[/code]
