This tool brings HTML5 range input to all browsers in such a way that you can make it look and behave like you want. This small candy weights only 2.2 Kb.
Change the value of the above range either by dragging the handle, clicking on the slider or changing the value of the input field. When you have the focus on the input field you can change the value with your Arrow Keys or with VIM keyboard shortcuts HJKL. PageUp and PageDown go 10 steps forward and backward.
HTML5 range input
For nerds and humans
Call $(":range").rangeinput(); and all your HTML5 range inputs are working. End users can pick values by dragging a slider or using the keyboard arrow keys. Hackers can use VIM keyboard shortcuts to move the range back and forth.
You can design ranges to fit the overall feel of your site. Use images and even the latest CSS3 techniques if you like. Every bit of the range is skinnable. The default CSS class names can be changed and you can design both horizontal and vertical ranges. Professional example skins are provided and you may use them for free.
File size: 2.20 Kb!
It contains everything you need: configurability, skinning, orientation, standards based behaviour, scripting API and an event model. And as a bonus you'll get a generic drag utility! Last, but not least: a smaller codebase is easier to control and results in snappier behaviour.
Here is a quick preview of how this tool is used:
Now your cross-browser range inputs are available. The browser's built-in range input is replaced by a normal text input to keep it from messing things up. Essentially the original range inputs are replaced by new input fields where the type attribute has been changed to "text". For further details take a look at the demo: minimal setup for range input.
- Minimal setup for rangeinput
- A couple of vertical ranges
- Multiple small ranges
- A custom scrollbar for a DIV
|css||Object||CSS class names used by the generated range. Here are the default values that you can change:|
|keyboard||true||Whether keyboard shortcuts are enabled when the focus is on the input field. Both arrow keys and VIM shortcuts are supported. The page-up and page-down keys move the range by 10 steps.|
|precision||0||By default the value's precision (the amount of decimal places) is determined by the value of the step configuration option. For example a value 0.01 results in a precision value 2 (two decimal places). You can override the automatic precision calculation with this configuration option.|
|progress||false||Whether the progress bar is shown and its width is adjusted accordingly.|
|speed||200||Animation speed for the drag handle when the range is clicked.|
A number that defines the size of a single step (the granularity of the value) limiting the amount of allowed values. A zero value or the string "any" disables stepping. The following range control only accepts values in the range from 0 to 1 and allows 100 steps within that range:
|vertical||false||If the slider element's height is larger than its width, the tool assumes that the range is vertical. You can override the assumption with this configuration variable.|
You can also configure the range by supplying valid HTML5 attributes for the range input field. For example:
|disabled||Whether the range is completely disabled. Both the slider and the input field are disabled. The disabled attribute can be toggled dynamically by scripting.|
|readonly||When enabled, the range is functional but the associative input field cannot be edited.|
|step||The amount of steps the range takes between min and max.|
Once the range is initialized the following kind of HTML layout is constructed:
There are two elements. The rangeinput and the input. Inside the rangeinput there is a progress bar and a drag handle. Here the handle has been dragged to position 200px, and the progress bar follows if it is enabled. The original range input is placed after the rangeinput component with its type attribute changed to "text". When it comes to skinning it's all about making your CSS against this structure. Here is one example skin which uses only one background gradient image.
First make sure you have familiarized yourself with jQuery Tools scripting.
||Returns the configuration of the current instance.|
||Returns the drag handle element.|
||Returns the input element.|
||Returns the progress element. The one that "follows" the handle.|
||Returns the current value of the range.|
||Advance to the next step (value).|
||Return to the previous step (value).|
||Sets the range value to the one specified in the argument.|
||Changes the range value by the value given in the step configuration option multiplied by amount. The default amount is 1. A negative value decreases the value and a positive value increases it.|
||Decreases the value with the amount of steps given in the argument. identical to step(-amount).|
||Increases the value with the amount of steps given in the argument. identical to step(amount).|
The official HTML5 range input defines a couple of DOM methods and attributes which are being enabled by this tool.
|stepDown(amount)||Decreases the value with the amount of steps given in the argument. identical to step(-amount) in the API.|
|stepUp(amount)||Increases the value with the amount of steps given in the argument. identical to step(amount) in the API.|
|Event||When does it occur?|
|onSlide||When sliding occurs. You can cancel the action by returning false or calling preventDefault() for the event object. Note that assigning this event listener is performance heavy and may affect the smoothness of the sliding experience.|
|change||After the range value is changed. If you slide the range by clicking on the underlying slider this is the only event that is being triggered. Note that the name is the same as the jQuery's change method and you can bind the event directly with that function. For other events you must use the bind method. This leads to more fluent syntax as shown in the example above.|