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.
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
Post a Comment
Please leave your comments here...