Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Including range form elements
- Modifying the display interactively
- Dragging items to wish lists
- Storing wish list items locally
- Saving and retrieving list items
Skill Level Intermediate
Before we get into actually building a project, I want to take a few moments to talk about each of the key technologies we are using. In all, we're going to be targeting three different technologies: the range form element, drag and drop, and localStorage. Let's start with the form element range. Here is the basic code for a range form element. As you can see, it's an input tag where the type is set to range. And there are several other attributes that you need to include.
Minimum is now set to 0 in our example, maximum I have set at a 100, and then value is set to 50. Wherever you set the value is where the slider handle will appear to be on the range control. Now, there is also an optional attribute called step. Once you declared the step value, your range control will move in those increments. There is decent browser support for the range form element. Current versions of Chrome, Safari, and Opera already supporting it, and soon Internet Explorer 10.
The only major holdout is Firefox, which currently displays just a text field which the user can enter a value into if they choose. However, there is no interactive slider that they can move back and forth. One hopeful sign: I have noted in the Firefox development circles that they do seem to be working on this feature for some time in the future. If you are unsure of what browsers are supported at what level, I heartily recommend going to caniuse.com, and once you are there, just search for range.
Let me show you what the range input type looks like in Chrome. As you can see, here is that same code that we had: the range from 0 to 100 that starts off at 50. Now, it's pretty obvious that there is one big limitation to the current specification and browser implementation, and that is there is no associated value field to indicate what the slider is representing. It is, however, relatively easy to implement, as you'll see during our project, and I do want to point out there is at least one other ready-made option, which you can find on the jquerytools.org site.
There is one key related object, and that's the dataTransfer object. This is used for, as the name implies, transferring information from a dragged object to a dropped one. So you set the data transfer object and the drag start event and then it's read in the drop event. The third technology used in this project is localStorage. localStorage is really very straightforward to use, and it adds a state to websites without delving into server-side coding.
Unlike with cookies, which is another way web developers have handled the state issue, local storage is handled through the browser cache. Significantly, it also has a much larger limit, as opposed to cookies. It's basically a name/value pair structure, and while there are ways around it-- primarily using JSON--you're normally storing and retrieving strings. There are essentially two simple commands. First localStorage.setItem. Here the first of the two arguments is the name of the item to be stored and the second is its value.
The second command, getItem, just uses one argument, and that's of course the name of the item you want to retrieve. Browser support for local storage is really rocking. You can find all the details on caniuse.com, under local storage. As you can see, it's been supported for quite some time, including all the way back to Internet Explorer 8. So those are the tools we get to play with as we enhance the user experience for an ecommerce catalog, starting in the next chapter.