Input number custom

index.slim

.wrapper
	input type="number" value="1"/
	span.input-button.add +
	span.input-button.remove -
.infos Try to shift + click 

input-number-custom.markdown

Input number custom

A Pen by Valentin Galmand on CodePen.

License.

script.js

var input = $('input'),
    input_val = parseInt(input.val()),
    btn_add = $('.add'),
    btn_remove = $('.remove');

input.keyup(function()  {
    input_val = parseInt(input.val())
});

btn_add.click(function(e) {
    if (e.shiftKey) {
        input_val += 10
    } else {
        input_val++
    }
    input.val(input_val);
});

btn_remove.click(function(e) {
    if (input_val > 11 && e.shiftKey) {
        input_val -= 10
    } else if (input_val > 1) {
        input_val--
    }
    input.val(input_val);
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.sass

/*Reset*/
*
	box-sizing: border-box
	&:focus
		outline: none

html, body 
	height: 100%
	width: 100%

body
	display: flex
	justify-content: center
	align-items: center
	flex-direction: column
	font-family: 'Roboto', sans-serif

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button
	-webkit-appearance: none
	margin: 0


input[type=number]
	-moz-appearance: textfield
	font-family: 'Roboto', sans-serif


.infos
	margin-top: 10px
	font-size: 12px
	color: rgba(#000, .6)

/*Code*/
.wrapper 
	position: relative
	height: 54px
	width: 200px
	&:after 
		content: 'minutes'
		position: absolute
		bottom: 6px
		left: 0
		width: calc(100% - 27px)
		text-align: center

input 
	height: 54px
	background: #FFFFFF
	border: 1px solid #E3E3E3
	border-radius: 4px 0 0 4px
	font-size: 20px
	color: #434343
	text-align: center
	width: calc(100% - 27px)
	font-weight: bold
	padding-bottom: 20px

.input-button 
	position: absolute
	height: 27px
	width: 27px
	border: 1px solid #E3E3E3
	color: #E3E3E3
	text-align: center
	line-height: 27px
	cursor: pointer
	user-select: none
	&:hover 
		background: #FAFAFA

	&.add 
		top: 0
		right: 1px
		border-radius: 0 4px 0 0
		border-bottom: none
	&.remove 
		bottom: 0
		right: 1px
		border-radius: 0 0 4px 0