Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Slip Sliding Away: Build an HTML Slider Control : Page 2

Win the usability war on your Form-oriented Web page with this new DHTML slider that acts just like the one your desktop GUI has supplied for years.


advertisement
Try the Samples
Here are some simple test slider samples you can experiment with. The file slider.html shows a slider in the context of a normal form. The slider uses CSS2 styles to give it an absolute position. In this case it appears after the end of the HTML. That's a limitation of the method used to create the sliders. Ideally, you would want the browser to render sliders inline in addition to using absolute positioning, but if you want to support Netscape 4, that's not an option.. Drag the stylus (the moveable part) of the slider around to see it work. When you press "Update", the code copies the slider's value into a normal <FORM> element, where it could be submitted to a server. In a real application, you would typically use a hidden form field to hold the slider's value rather than a text field. The second example, report.html shows the disk use of a Linux box, but it could just as easily be any performance report. In this sample, the sliders aren't interactive, but they do provide an interesting visual method of presenting the information.

The third example hand.html shows a different interactive slider, and illustrates that the visual representation of the slider is entirely independent of its implementation. The stylus uses a different image. This slider is continuous, meaning the stylus can stop anywhere, not just at one of the ticks. The remainder of the visual representation—the ""uses the same image as before, but the value types, labels and fonts are all different.



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date