Skip to main content

Jquery Mobile Form - Slider control

    Input field of type range is newly introduced in HTML5 and is very well styled. The style is further enhanced when using the Jquery Mobile framework and we will see how this can be done in today's post. Jquery Mobile styles the range input type with capsule-corners and adds a circular handle to the slider. The input's value is used to configure the starting position of the handle and the value is populated in the text input. Specify the min and max attribute values to set the slider's range. If you want to constrain input to specific increments, add the step attribute. As you drag the slider's handle, the framework will update the native input's value (and vice-versa) so they are always in sync; this ensures that the value is submitted with the form.

    The range input elements are available in 2 flavors/sizes - regular and mini. Adding a data attribute data-mini="true" to the input tag renders a smaller sized input element. Let's take a look at the code sample below to understand the working in a better way.


    In the code above, you will see 5 different implementations of the input range element (slider control). The first one is a regular input of type range with the label and the range slider one below the other. The second implementation is exactly similar to the first implementation with the only difference of the added data attribute "data-mini="true"" which reduces the size (basically height) of the range slider.

    The third implementation gets the label and the slider on the same line. This implementation is done using a div with data attribute data-role="fieldcontain" around the label and input tags. This div has to be within a form tag. Maintaining the HTML structure is very important when using JQuery Mobile framework.

    In the fourth implementation, we have a 
regular input of type range with the label and the range slider one below the other. Here we have introduced a new data attribute data-highlight="true". Using this data attribute sets a default blue color to the selected value on the slider.

    To disable the input field just add the keyword "disabled" to the input tag and your input type would be disabled.


    For the sake of accessibility, jQuery Mobile requires that all form elements be paired with a meaningful label. To hide labels in a way that leaves them visible to assistive technologies. — for example, when letting an element's placeholder attribute serve as a label — apply the helper class ui-hidden-accessible to the label itself. While the label will no longer be visible, it will be available to assisitive technologies such as screen readers.

    Hope this post has been informative to you and helps you use the range input type effectively to create the range slider in your next Jquery Mobile based application. Drop a comment to let me know what you feel about this post as well as the earlier series on Jquery Mobile listview. Share the post if is has helped you, so that maximum developers benefit from this one.

Comments

Recommended for You

Is Google cheating?

               I found this piece of interesting fact, accidently while browsing the internet. Google shows different maps for India, China and USA. Confused hun! Well don’t be…Just read on… In Indian version of Google Maps, you can see Arunachal Pradesh and eastern part of Jammu and Kashmir as integral part of India. In US version of Google Maps, you can see Arunachal Pradesh and Jammu and Kashmir as a disputed region. In the Chinese version of the Google Maps, you can see Arunachal Pradesh and JnK as not a part of India.                 Many people complained this issue to Google. A Google employee responded : “ We do show different versions of this border, because we required to by law. Indian law requires us to show it one way, and the Chinese law requires us to show it another way . If we can legally do so, we strive to present borders in a neutral and objective manner, which is why the US version avoids taking either side and simply labels the border as disputed. ”   

Custom online cards from Google Maps...

            Share a message of holiday cheer with custom online cards from Google Maps this New Year! Think Green, Go Green this New Year. Save paper and that too with a difference! This new year you can send your friends, family and loved ones an e-card which is out of the box!             You can choose from 10 different online holiday cards and add your personal message. Now, after reading this you will think what's so different here! The surprise is yet to unfold...You can include specific directions, a Street view image or your favorite place on the inside of the card!             So now planning your New Year party will become easier. You can send an e-card with directions from your friend's place to the place where you are hosting your New Year party! Won't that be fun!             You can send your personalized Google Maps New Year Cards from here !             Warm wishes for a great holiday season and wish you a Happy Mapping Year...

Map Loading...

    The blank web page seems so boring and dull when the map is still loading. You will come across such a situation quite often where you will be having a slow internet connection! We cannot do anything about the slow internet connection, but we can surely avoid the dull blank web-page by using a simple trick. We can place a "loading" image at the center of the web page so that the page doesn't look blank! An image like this:             The following code will show you how this can be done and here it is!     As you all can see the code is very very simple and the output will look as seen in the results section above. The image below shows the loading stage of the map.       Do let me know what you think about the examples shared here! Do leave your comments here! Till the next example, happy mapping!

GIS Technology to identify all properties in BBMP Limits

          The Bruhat Bangalore Mahanagara Palike (BBMP) has for the last two years, been in the process of conducting a massive exercise to map the 13.87 lakh properties in the 198 wards in the city. Geographical Information System (GIS) has proven to be an effective tool for analysing and displaying thematic maps of all the roads for proper evaluation and correction of zones.            As of now, 11 lakh properties have come under the tax net. The aim of this programme, which is perhaps the first such exercise being conducted in the country on such a large scale, covering 800 square km, is to bring all properties under the tax net and ensure that the BBMP has accurate information pertaining to the properties’ dimension, built-up area, land use and classification. The process of validation of GIS maps will be completed in January 2011.           The process uses satellite digital maps of the BBMP area to generate a vector map from the information obtained. These high r

A Giant called Google...

    Wondering what you will be reading in this post today and what is "Google Giant"! Well, I was working on a simple project a couple of months back and that is the time when I was amazed and by the size of data that Google Maps servers might be having! As most of the readers (developers and enthusiast included) would know or might have noticed, Google maps are rendered by stitching small images together. You must have observed this on quite a number of occasions, when you see grey tiles when you have a slow internet connection in particular. It takes time for the images or tiles as we call them to be displayed.     Let us try and estimate what could be the size of the Google Maps data! Before proceeding, let's make a few assumptions and considerations. 1. Let's consider the Google Street View maps only. 2. The zoom level that is considered for the calculations is 21 - the max zoom level allowed on Google Maps API. 3. All the numbers are just an estimate a