<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/fonts/css/verint_lux.css">
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism.min.js"></script>
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism-coy.min.css">
<div class="card">
<div class="card-header">Spinner <button id="toggleMarkup" type="button" class="btn btn-sm btn-outline-primary btn btn-fixed-width float-right m-0" onclick="$('pre' ).toggle()">Toggle Markup</button></div>
<div class="card-body">
<form>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular</label>
<div class="col-lg-4">
<div class="form-control-container">
<input type="number" class="form-control form-control-sm" placeholder="Guiding Text" min="0" max="100" value="0">
<div class="btn-group btn-group-sm spinner-group">
<button type="button" class="btn btn-outline-light btn-sm increment" tabindex="-1">
<i class="icon-up"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm decrement" tabindex="-1">
<i class="icon-down"></i>
</button>
</div>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><div class="form-control-container">
<input type="number" class="form-control form-control-sm" placeholder="Guiding Text" min="0" max="100" value="0">
<div class="btn-group btn-group-sm spinner-group">
<button type="button" class="btn btn-outline-light btn-sm increment" tabindex="-1">
<i class="icon-up"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm decrement" tabindex="-1">
<i class="icon-down"></i>
</button>
</div>
</div></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Disabled</label>
<div class="col-lg-4">
<div class="form-control-container">
<input type="number" class="form-control form-control-sm" placeholder="Guiding Text" min="0" max="100" value="0" disabled>
<div class="btn-group btn-group-sm spinner-group">
<button type="button" class="btn btn-outline-light btn-sm increment" tabindex="-1" disabled>
<i class="icon-up"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm decrement" tabindex="-1" disabled>
<i class="icon-down"></i>
</button>
</div>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><div class="form-control-container">
<input type="number" class="form-control form-control-sm" placeholder="Guiding Text" min="0" max="100" value="0" disabled>
<div class="btn-group btn-group-sm spinner-group">
<button type="button" class="btn btn-outline-light btn-sm increment" tabindex="-1" disabled>
<i class="icon-up"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm decrement" tabindex="-1" disabled>
<i class="icon-down"></i>
</button>
</div>
</div></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Read-Only</label>
<div class="col-lg-4">
<div class="form-control-container">
<input type="number" class="form-control form-control-sm" placeholder="Guiding Text" min="0" max="100" value="0" readonly>
<div class="btn-group btn-group-sm spinner-group">
<button type="button" class="btn btn-outline-light btn-sm increment" tabindex="-1" disabled>
<i class="icon-up"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm decrement" tabindex="-1" disabled>
<i class="icon-down"></i>
</button>
</div>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><div class="form-control-container">
<input type="number" class="form-control form-control-sm" placeholder="Guiding Text" valuemin="0" readonly>
max="100" value="0" readonly>
<div class="btn-group btn-group-sm spinner-group">
<button type="button" class="btn btn-outline-light btn-sm increment" tabindex="-1" disabled>
<i class="icon-up"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm decrement" tabindex="-1" disabled>
<i class="icon-down"></i>
</button>
</div>
</div></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Error</label>
<div class="col-lg-4">
<div class="form-control-container">
<input type="number" class="form-control form-control-sm is-invalid" placeholder="Guiding Text" min="0" max="100" value="0101">
<div class="btn-group btn-group-sm spinner-group">
<button type="button" class="btn btn-outline-light btn-sm is-invalid increment" tabindex="-1">
<i class="icon-up"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm is-invalid decrement" tabindex="-1">
<i class="icon-down"></i>
</button>
</div>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><div class="form-control-container">
<input type="number" class="form-control form-control-sm is-invalid" placeholder="Guiding Text" min="0" max="100" value="0101">
<div class="btn-group btn-group-sm spinner-group">
<button type="button" class="btn btn-outline-light btn-sm is-invalid increment" tabindex="-1">
<i class="icon-up"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm is-invalid decrement" tabindex="-1">
<i class="icon-down"></i>
</button>
</div>
</div></script></code></pre>
</div>
</div>
</form>
</div>
</div>
<script>
$("'.spinner-group .increment"form-control[type="number"]').on( "click"'keypress', function(e) {
$(this{
return e.metaKey || // cmd/ctrl
e.which <= 0 || // arrow keys
e.which == 8 || // delete key
/[0-9]/.test(String.fromCharCode(e.which)); // numbers
});
$('.form-control[type="number"]').on('input', function(e){
if(!($(this).is(':disabled') || $(this).is('[readonly]'))) {
let disableMinButton = (Number(this.value)) <= Math.abs(this.getAttribute('min'));
$(this).siblings('.spinner-group').find('.decrement').attr("disabled", disableMinButton);
let disableMaxButton = (Number(this.value)) >= Math.abs(this.getAttribute('max'));
$(this).siblings('.spinner-group').find('.increment').attr("disabled", disableMaxButton);
}
$(this).toggleClass('is-invalid', $(this).is(':invalid'));
$(this).siblings('.spinner-group').find('button').toggleClass('is-invalid', $(this).is(':invalid'));
});
$('.form-control[type="number"]').trigger("input"); // update bars at startup
function incr(elem) {
btn = $(elem).closest('.form-control-container').find('.form-control[type="number"]').val( function(i, oldval) {
return ++oldval');
btn.get(0).stepUp(1);
}btn.trigger("input");
});
$(".spinner-group .decrement").on( "click", function(
function decr(elem) {
btn = $(thiselem).closest('.form-control-container').find('.form-control[type="number"]').val( function(i, oldval;
btn.get(0).stepDown(1);
btn.trigger("input");
}
var increment = $(".spinner-group .increment");
increment.on( "click", function() {
incr(this);
});
var decrement return= --oldval$(".spinner-group .decrement");
}
decrement.on( "click", function() {
decr(this);
});
</script> |