Простой и удобный спиннер с возможностью арифметических операций.
Пока доступны операции, только с целыми числами.
Для работы спиннера необходим jQuery!
Стиль:
<style> .touchspin > div{display: inline-block} </style>
HTML код: <figure class="touchspin"> <div class="btn dec trigger" data-action="dec"><</div> <input class="value" value="0" /> <div class="btn inc trigger" data-action="inc">></div> </figure>
Дополнительные триггеры: <div class="btn trigger" data-action="plus" data-n="6">+6</div> — сложение <div class="btn trigger" data-action="minus" data-n="6">-6</div> — вычитание <div class="btn trigger" data-action="mul" data-n="6">*6</div> — умножение <div class="btn trigger" data-action="div" data-n="6">/6</div> — деление <div class="btn trigger" data-action="percent" data-n="6">%6</div> — проценты
Скрипт JS: <script> //Обработка тачспина $('.touchspin .trigger').on('click', function(){ var ts = $(this).closest('.touchspin'); var trigger = $(this); var input = ts.find('.value'); var action = trigger.data('action'); var val = parseInt(input.val()); var min = parseInt(input.data('min')); var max = parseInt(input.data('max')); var n = parseInt(trigger.data('n')); switch(action){ case 'inc' : { val++; break; }; case 'dec' : { val--; break; } case 'plus' : { val = val+n; break; } case 'minus' : { val = val-n; break; } case 'mul' : { val = (val * n); break; } case 'div' : { val = (val / n); break; } case 'percent' : { val = ((val / 100) * n); break; } default: val++; } val = (val < min) ? min : val; val = (val > max) ? max : val; input.val(val); }); </script>