Spinbox examples

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<link rel="stylesheet" href="//www.fuelcdn.com/fuelux/3.11.0/css/fuelux.min.css">
<script src="http://fuelux-snippets.herokuapp.com/img/favicon.ico"></script>
<script src="//www.fuelcdn.com/fuelux-utilities/1.0.0/js/fuelux-utilities.min.js"></script>
<script src="https://www.fuelcdn.com/fuelux/3.11.4/js/fuelux.min.js"></script>
<body style="padding: 10px;" class="fuelux">
    <p>Spinbox with custom decimal:
        <div class="spinbox" id="mySpinbox">
            <input type="text" class="form-control input-mini spinbox-input">
            <div class="spinbox-buttons btn-group btn-group-vertical">
                <button type="button" class="btn btn-default spinbox-up btn-xs"> <span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>

                </button>
                <button type="button" class="btn btn-default spinbox-down btn-xs"> <span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>

                </button>
            </div>
        </div>
    </p>
    <p>Spinbox with limitToStep:
        <div class="spinbox" id="mySpinbox2">
            <input type="text" class="form-control input-mini spinbox-input">
            <div class="spinbox-buttons btn-group btn-group-vertical">
                <button type="button" class="btn btn-default spinbox-up btn-xs"> <span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>

                </button>
                <button type="button" class="btn btn-default spinbox-down btn-xs"> <span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>

                </button>
            </div>
        </div>
    </p>
</body>

CSS

body {
    padding: 20px;
}

JavaScript

$('#mySpinbox').css({
   width: 100,
  }).spinbox({
	    value: '1,0px',
	    min: 0,
	    max: 10,
	    step: 0.1,
	    decimalMark: ',',
	    units: ['px'],
	    defaultUnit: 'px'
	});

	$('#mySpinbox2').spinbox({
	    value: 1,
	    min: 3,
	    max: 22,
	    step: 5,
	    limitToStep: true
	});