Browse DevX
Sign up for e-mail newsletters from DevX


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.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

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.

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