Using Bootstrap Touchspin to manage numeric fields I have e to the following issue:

I want to allow two decimals in the field, but upon clicking the up- and down button, I want to have a step change of 1.

When setting 'step' to 1, all entered values are being rounded (so the decimals are always 00) When I set the step to 0.01, the up- and down buttons are slow and inconvenient.

Who knows a way to bine a step of 1 and maintain the possibility to enter 2 digits of precision?

Using Bootstrap Touchspin to manage numeric fields I have e to the following issue:

I want to allow two decimals in the field, but upon clicking the up- and down button, I want to have a step change of 1.

When setting 'step' to 1, all entered values are being rounded (so the decimals are always 00) When I set the step to 0.01, the up- and down buttons are slow and inconvenient.

Who knows a way to bine a step of 1 and maintain the possibility to enter 2 digits of precision?

• javascript
• twitter-bootstrap
• twitter-bootstrap-3

2 Answers 2

You can use the first example here: http://www.virtuosoft.eu/code/bootstrap-touchspin/

The code is:

<input id="demo1" type="text" value="55" name="demo1">
<script>
    $("input[name='demo1']").TouchSpin({
        min: 0,
        max: 100,
        step: 0.1,
        decimals: 2,
        boostat: 5,
        maxboostedstep: 10,
        postfix: '%'
    });
</script>

I know this is old but the accepted answer does not produce the correct answer to the question that was asked. It only steps by .1 and also rounds to the first decimal place (tenths only). So 23.22 will be rounded to 23.20.

I want to allow two decimals in the field, but upon clicking the up- and down button, I want to have a step change of 1.

This is how to acplish the answer to the question ...

<input id="demo1" type="text" value="55" name="demo1">
<script>
    $("input[name='demo1']").TouchSpin({
        min: 0,
        max: 100,
        step: 1,
        decimals: 2,
        forcestepdivisibility: 'none',
        boostat: 5,
        maxboostedstep: 10,
        postfix: '%'
    });
</script>

This forcestepdivisibility: 'none', will allow the stepper to step by 1 but still allow you to enter 2 decimal places without rounding.