Join Joseph Lowery for an in-depth discussion in this video Incorporating a slider control, part of Building Android and iOS Apps with Dreamweaver CS5.5.
- View Offline
One of the key advantages to use in jQuery Mobile is that most of the great form controls included in HTML5, actually work. In this video we're going to take a look at the slider control that makes it easy for the user to choose from a range of numbers. Unlike in the world of browsers where the input type range has only limited support with jQuery Mobile, it does what it's supposed to do. Here's an example. Here I have the Trail Rating and by default I've it set to 5, right in the middle of my 0 to 10 scale and if I move the slider down, the rating adjusts.
If I move it all the way to the right, it goes for the maximum level. Very simple very easy-to-use, great for touch screens. Now let me show you how to implement that. So I've opened the report.html file from Chapter 6 > 06_07 subfolder and I want to place my slider right above the comment. So I'm going to go ahead and click in select the text area and then from the tag selector choose the div tag and press my Left Arrow key once so that I can move my cursor right in front of that div tag and now we're ready to insert the slider.
You'll find this in the Insert panel, in the jQuery Mobile category, near the very end and it's just called a Slider. So click on that once and the code is inserted. Now let's open up the Property Inspector and I'm going to first change the label from value to Trail Rating and now I'm going to select the input control. If you take a look at the code and even see down below in the Property Inspector the type is not text, but range.
This is an HTML5 enhancement that allows you to choose from a range of numbers. So let's give it a specific name. We'll call it reportRating and then I want to change some of the parameters. Now I could either do it through the code or once again Dreamweaver has a very nice little interface, so let's open that up just to take a quick look. Here you see the ID set to reportRating, MIN and MAX. Let's change the MAX to 10 rather than 100.
So we have a 0 to 10 scale and click OK. Now the other attribute I want to change is the default value. It's originally set to 0 and I want to change that to 5. Again you could do it in the code or in the Property Inspector. So I'll just go ahead and erase that 0 next to Value and press Tab to lock it in. All right! Let's take a look at our slider. Go to the Live View and let's move down towards the Comment area and there's the slider control.
Let's click and drag it to one direction seems to be working fine. I am going all the way down to 0 and now I'll bring it up to 7. That's fine and all the way up to 10, looking good. A slider control can be used wherever you need your users to choose from a range of numbers. It's very straightforward to implement, extremely flexible and totally mobile user friendly.
- Understanding the mobile app toolset
- Working with jQuery Mobile and mobile starters in Dreamweaver
- Applying an overall theme to an app
- Specifying Android settings
- Simulating the iPhone
- Setting up mobile pages
- Keeping jQuery Mobile current
- Applying page transitions
- Creating collapsible content
- Defining list views with images
- Creating web forms for mobile
- Integrating geolocation data with Google Maps
- Previewing an app in Device Central