Including range form elements


show more Including range form elements provides you with in-depth training on Web. Taught by Joseph Lowery as part of the HTML5 Projects: Engaging Ecommerce show less
please wait ...

Including range form elements

The first step towards enhancing the user experience of our ecommerce catalog is to add in a form element new to HTML5, the range input type. It's a very straightforward tag with just a few attributes. In this lesson I'll also add in another form element, a basic text input type, so we can eventually display the actual range value as the slider moves. Finally, I'll show you a very cool CSS property that you don't want to implement to help with your slider stylings.

So here's what the page looks like at this current stage. You can see over on the right, under the Price Slider area, there is nothing there. So now let's switch over to our code editor. So I am going to scroll down to about line 67 here, where I have a little handy placeholder, insert range input type here. Let's delete that, and now I'll put in my code for the input tag, starting with input. I'm going to enter an id that we'll use later in our JavaScript routines, and let's just call ...

Including range form elements
Video duration: 5m 3s 37m 29s Intermediate

Viewers:

Including range form elements provides you with in-depth training on Web. Taught by Joseph Lowery as part of the HTML5 Projects: Engaging Ecommerce

Subject:
Web
Software:
HTML JavaScript CSS
Author:
please wait ...