slider.html 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>Ext Slider Example</title>
  6. <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css">
  7. <link rel="stylesheet" type="text/css" href="../shared/example.css">
  8. <link rel="stylesheet" type="text/css" href="slider.css">
  9. <!-- GC -->
  10. <script type="text/javascript" src="../../ext-all.js"></script>
  11. <script type="text/javascript" src="slider.js"></script>
  12. </head>
  13. <body>
  14. <h1>Ext Slider Example</h1>
  15. <p>Sliders support keyboard adjustments, configurable snapping, axis clicking and animation.</p>
  16. <p>The source is not minified - see <a href="slider.js">slider.js</a></p>
  17. <h3>Basic Slider</h3>
  18. <div id="basic-slider"></div>
  19. <br/>
  20. <h3>Snapping Slider</h3>
  21. <div id="increment-slider"></div>
  22. <br/>
  23. <h3>Snapping Slider with minValue. 65 to 75 in increments of 2</h3>
  24. <div id="increment-slider-minValue"></div>
  25. <br/>
  26. <h3>Vertical Slider</h3>
  27. <div id="vertical-slider"></div>
  28. <br/>
  29. <h3>Slider with tip</h3>
  30. <div id="tip-slider"></div>
  31. <br/>
  32. <h3>Slider with custom tip</h3>
  33. <div id="custom-tip-slider"></div>
  34. <br/>
  35. <h3>CSS Customized Slider</h3>
  36. <div id="custom-slider"></div>
  37. <h3>Slider with multiple thumbs</h3>
  38. <div id="multi-slider-horizontal"></div>
  39. <h3>Vertical Slider with multiple thumbs</h3>
  40. <div id="multi-slider-vertical"></div>
  41. <!-- extra space for scrolling -->
  42. <div style="height:150px;"></div>
  43. </body>
  44. </html>