Entering a Range-Constrained Value - J Query

Problem
A slider is good at handling rough inputs and visualizing them but bad for gathering exact values. An example would be a pixel value in a layout component, where the value has to be tuned in very small increments, pixel by pixel. With a standard input, the keyboard has to be used: click the field, remove the current value and enter a new value, repeat for each increment.

Solution

The jQuery UI spinner widget can solve this problem by adding up and down buttons to the input to enable mouse interaction as well as handle keyboard events like cursor up and down.
All you need is a regular text input:

This will create and position the up/down buttons and add the necessary keyboard handling events.
Use the spinner plugin to add buttons to in- and decrement the value, either by clicking the buttons or giving the input focus and using the cursor keys.
It also restricts the input to numeric values—when entering abc into the spinner, it’ll get replaced with the default value on blur. Unless specified otherwise, it’s a zero.

Discussion

The plugin offers a few options to restrict the input further:

  • minsets the lower limit, e.g., −10 or 100.

  • maxsets the upper limit, e.g., 10 or 200.

  • stepping restricts the value to certain increments, e.g., 5; the default is 1.

When the spinner is used to input a currency value, the currency option can be used to display the appropriate symbol inside the input.
The following example puts these all together and creates a form for donating money:

We have a select for the currency and a text input for the amount:

We bind a change event to the currency select to update the currency option of the spinner whenever the selection changes.
The spinner itself is initialized with the current value, as well as limits for min, max, and step, restricting the value somewhere between 5 and 1,000, with increments of 5, e.g., 10, 15, 20, and so on.

Google Maps integration

The value may also be a decimal number; in that case, the decimal option can be used to specify the number of allowed digits after the decimal point. In the following example, we display a Google map and use spinners to specify the latitude and longitude values.
To start with, we include the Google Maps API scripts:

With that in place, we can add markup for the spinners and the actual map, along with some minimal styles:


Based on that, we can initialize the map and link it with the spinners:

The position function sets the center of the map to the latitude and longitude values obtained from the spinners. They are initialized with the decimal option set to 6, and passing the position function for the change option. With that, the map is updated whenever one of the spinners changes. Then the map itself is initialized, using the Google Maps API.
The drawback of the spinner in this case is that increments and decrements affect only the digits before the decimal point, so scrolling is rather rough. The increment option rounds any value below one up to one, so it can’t help here.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

J Query Topics