JSFiddle - React, Tailwind, and code Playground

by ProjectSoft

HTML

<div class="numbertype">
    <input type="hidden" name="rooms" id="rooms" value="1" min="1" max="20" />
    <div class="design">
        <span class="result">1 комната</span>
        <span class="minus"></span>
        <span class="plus"></span>
    </div>
</div>

CSS

*, *:after, *:before {
    box-sizing: border-box;
}
.numbertype {
    position: relative;
    font-family: Consolas;
    user-select: none;
    cursor: default;
}
.numbertype > .design {
    position: relative;
    overflow: hidden;
    background-color: #fff;
    display: inline-block;
    text-align: center;
    padding: 5px;
    border-radius: 45px;
    border: 1px solid #ff00ff;
    min-width: 200px;
}
.numbertype > .design > .minus, 
.numbertype > .design > .plus {
    display: block;
    line-height: 1;
    border-radius: 50%;
    background-color: #ff98ff;
    font-size: 40px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    position: relative;
    overflow: hidden;
}
.numbertype > .design > .minus {
    float: left;
}
.numbertype > .design > .plus {
    float: right;
}
.numbertype > .design > .minus:before {
    content: "-";
}
.numbertype > .design > .plus:before {
    content: "+"
}
.numbertype > .design > .minus:before,
.numbertype > .design > .plus:before {
    display: block;
    margin-top: -2px;
}
.numbertype > .design > .minus.disabled,
.numbertype > .design > .plus.disabled {
    color: #fff;
    cursor: default;
}
.numbertype > .design > .result {
    display: inline-block;
    top: 10px;
    position: relative;
}

JavaScript

$(function(){
	var roomsDecl = ['комната','комнаты','комнат'],
    	design = $(".numbertype > .design"),
		input =  $(".numbertype > input"),
        result = $(".result", design),
        pBtn = $(".plus", design),
        mBtn = $(".minus", design),
        declension = function(value, titles)  
		{  
    		var cases = [2, 0, 1, 1, 1, 2];  
    		return titles[(value%100 > 4 && value%100 < 20) ? 2 : cases[(value%10 < 5) ? value%10 : 5]];  
		};
    if(input.length){
    	var max = isNaN(parseInt(input[0].max)) ? 1 : parseInt(input[0].max),
        	min = isNaN(parseInt(input[0].min)) ? 1 : parseInt(input[0].min),
            val = isNaN(parseInt(input[0].value)) ? 1 : parseInt(input[0].value),
            change = function(e){
            	val == min ? mBtn.addClass('disabled') : mBtn.removeClass('disabled');
            	val == max ? pBtn.addClass('disabled') : pBtn.removeClass('disabled');
            	result.text(val + " " + declension(val, roomsDecl));
            };
        pBtn.on("click", function(e){
        	e.preventDefault();
            val = val >= max ? max : val+1;
            input.val(val).trigger("change");
            return !1;
        });
        ;
        mBtn.on("click", function(e){
        	e.preventDefault();
            val = val <= min ? min : val-1;
            input.val(val).trigger("change");
            return !1;
        });
        input.on("input change", change).val(val).trigger("change");
    }
});