CODEWITHSUNDEEP
jquerycsstwitter-bootstrapfont-awesome
Leandro Bardelli
Leandro Bardelli

Reputation: 11578

Numeric Up and Down (Spinner Control) in Bootstrap 3

I tried to convert several numeric up and down (numeric spinner) control, but I couldn't. JQuery UI Spinner is not an option since I'm using bootstrap 3, and I couldn't deploy the spinner from fuelx stand alone.

I found 2 or 3 similar but are them for bootstrap 2.

After fighting with CSS, I found some guy here that could it, I make a fiddler with his answer but is stil doesn't work. Images doesn't show.

I think is some related with my version of font awesome on: 

<a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-sort-down"></i>

but I'm not sure. Any hint will be preciated.

Last version of my fiddler: http://jsfiddle.net/Leandro1981/wt8CD/

Related questions:

Convert Bootstrap 2.3.2 & jQuery-Spinner to work with Bootstrap 3.*

Cross-browser Numeric Spinner / Stepper for Bootstrap

Cross-browser Numeric Spinner / Stepper for Bootstrap

Upvotes: 3

Views: 19783

Answers (2)

Cayan
Cayan

Reputation: 462

A better solution for the javascript part, since the one given only supports a single spinner per page.

$('.spinner .btn:first-of-type').on('click', function() {
    var spinner = $(this).parent().parent().find('input');
    spinner.val(parseInt(spinner.val(), 10) + 1);
});

$('.spinner .btn:last-of-type').on('click', function() {
    var spinner = $(this).parent().parent().find('input');
    spinner.val(parseInt(spinner.val(), 10) - 1);
});

A possible update is to add min, max, scroll and keyboard support.

Upvotes: 8

Leandro Bardelli
Leandro Bardelli

Reputation: 11578

Working code: http://jsfiddle.net/Leandro1981/75M6s/3/

with an easy jquery plugin

   (function ($) {
  $('.spinner .btn:first-of-type').on('click', function() {
    $('.spinner input').val( parseInt($('.spinner input').val(), 10) + 1);
  });
  $('.spinner .btn:last-of-type').on('click', function() {
    $('.spinner input').val( parseInt($('.spinner input').val(), 10) - 1);
  });
})(jQuery);

from: http://codepen.io/Thomas-Lebeau/pen/csHqx

Upvotes: 3

Related Questions