Using standard HTML5 APIs and open source polyfills
In the first two articles in this three-part series, you learned how to implement an ad-hoc HTML5 slider component. That component provides a lot of sophisticated functionality; for example, it uses CSS3 transitions to animate the slider's knob smoothly when the user clicks in the slider's rail. But (as you can see from the series'first article) from a developer standpoint, it's not as straightforward to use in an application as built-in HTML elements.
Besides being difficult to use, the ad-hoc slider is also vulnerable to abuse, whether intentional or not. Anyone can access the slider's elements, because — like nearly all other JavaScript ad-hoc components in existence today — the slider adds them directly into the DOM tree.
It would be ideal to reduce the preceding steps to simply Add a slider tag to your HTML. That's exactly what you'll do in this article by turning the ad-hoc slider into a standard HTML5 component, using the following API...
Your new post is loading...