Search code examples
jquerytwitter-bootstrapfuelux

fuelex spinner and manual values outside of range


I am using the fuelux spinner jquery plugin. I have setup a simple spinner as follows :

$('#spinner3').spinner({value:3, step: 1, min: 0, max: 10, speed: "medium"});

Works great, BUT, I noticed you can manually enter a value outside of the range with no problem. For instance, I can manually enter 20 (10 is the max) in my example above. I can no longer go up in value using the button, but I can go down. Once back in my range the min/max kicks in again.

I saw there was an event for 'change' in the doc, but I can't seem to get it working to prevent manual entries outside of my range. I was thinking something simple like if value > max then value = max and same for min.

    //ensure min and max on manual entry
    $("#spinner3").on('changed', function() {
        if ( $(this).val() > 'max' ) {
            $(this).val( 'max' );
        }
        if ( $(this).val() < 'min' ) {
            $(this).val( 'min' );
        }
    });

Solution

  • Figured it out :

    var handleSpinners = function () {
    
        $('#spinner3').spinner({value:3, step: 1, min: 0, max: 10, speed: "medium"});
    
        $('#spinner3').on('change', function() {
            var value = $('#spinner3').spinner('value');
            if ( value > 10 ) {
                $("#spinner3 .spinner-input").val(10);
            }
            ... and same for min
        });
    }