jQuery Plugin For Resizing Ranged Number Inputs - powerRanger

File Size: 304KB
Views Total: 849
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin For Resizing Ranged Number Inputs - powerRanger

powerRanger is a jQuery plugin that automatically resize number inputs based on the length of characters.


  • Supports for max/min number inputs
  • Supports for input selection range

Basic Usage:

1. Include jQuery javascript library and jQuery powerRanger plugin at the bottom of your page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="jquery.powerRanger.js"></script> 

2. Create a number input on your web page

<div class="demo">
<input type="number" value="100" min="10" max="2000000">

3. Call the function

<script type="text/javascript" defer>
var inputs = $('#demo-section').find('input');
$('body').hide().fadeIn(100, function(){

4. Options

// subtracted from total font size -- adjust to your liking
scale_factor: 12

// number of letters before resizing stops
cutoff_length: 7

// default font size of non-resized letters
cutoff_size: 20

This awesome jQuery plugin is developed by christabor. For more Advanced Usages, please check the demo page or visit the official website.