Materializecss

Materialize css

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<h3>
Example with Float
</h3>
<div class="col s2 adds">
  <a id="" href="#" data-field-qty="quantity_to_cart_11;0.20" class="btn btn-default button-minus product_quantity_down">
    <span><i class="material-icons">remove</i></span>
  </a>
</div>
<div class="col s5 qty">
  <input type="text" name="quantity_to_cart_11" id="quantity_to_cart_11" class="text qty_value" value="0.20" data-minimal_quantity="0.20" />
</div>
<div class="col s2 adds">
  <a href="#" data-field-qty="quantity_to_cart_11;0.20" class="btn btn-default button-plus product_quantity_up">
	  <span><i class="material-icons">add</i></span>
  </a>
</div>

CSS

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v30/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

JavaScript

// The button to increment the product value
$(document).on('click', '.product_quantity_up', function(e){
	e.preventDefault();
	var arrayData = $(this).data('field-qty');
    var arr = arrayData.split(';');
    for (i = 0; i < arr.length; i++) {
        console.log(arr[i]);
    }
	fieldName = arr[0];
	var currentVal = parseFloat($('input[name='+fieldName+']').val());
	var minimalVal = parseFloat($('input[name='+fieldName+']').attr("data-minimal_quantity"));

	if (!isNaN(currentVal) && currentVal < minimalVal) {
		$('input[name='+fieldName+']').val(minimalVal);
        $(this).parent().parent().find(".ajax_add_to_cart_button").attr("data-minimal_quantity",minimalVal);
    }
	else {
		$('input[name='+fieldName+']').val(currentVal + parseFloat(arr[1])).trigger('keyup');
        $(this).parent().parent().find(".ajax_add_to_cart_button").attr("data-minimal_quantity",currentVal + parseFloat(arr[1]));
    }
 
	$('#'+fieldName).change();
	
	
 
});
 // The button to decrement the product value
$(document).on('click', '.product_quantity_down', function(e){
	e.preventDefault();
	var arrayData = $(this).data('field-qty');
	var arr = arrayData.split(';');
    for (i = 0; i < arr.length; i++) {
        console.log(arr[i]);
    }
	fieldName = arr[0];
	var currentVal = parseFloat($('input[name='+fieldName+']').val()).toFixed(2);
    var minimalVal = parseFloat($('input[name='+fieldName+']').attr("data-minimal_quantity"));
 
	if (!isNaN(currentVal) && currentVal > minimalVal){
		$('input[name='+fieldName+']').val(currentVal - parseFloat(arr[1])).trigger('keyup');
        $(this).parent().parent().find(".ajax_add_to_cart_button").attr("data-minimal_quantity",currentVal - parseFloat(arr[1]));
    }
	else {
		$('input[name='+fieldName+']').val(minimalVal);
        $(this).parent().parent().find(".ajax_add_to_cart_button").attr("data-minimal_quantity",minimalVal);
    }
 
	$('#'+fieldName).change();
 
});