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 representationthe ""uses the same image as before, but the value types, labels and fonts are all different.