slider-demo.js 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. /* jQuery UI Slider */
  2. $(function() {
  3. "use strict";
  4. $("#slider-example").slider();
  5. });
  6. $(function() {
  7. "use strict";
  8. $("#horizontal-slider").slider({
  9. value: 40,
  10. orientation: "horizontal",
  11. range: "min",
  12. animate: true
  13. });
  14. });
  15. $(function() {
  16. "use strict";
  17. $("#slider-range-vertical").slider({
  18. orientation: "vertical",
  19. range: true,
  20. values: [17, 67],
  21. slide: function(event, ui) {
  22. $("#amount-vertical-range").val("$" + ui.values[0] + " - $" + ui.values[1]);
  23. }
  24. });
  25. $("#amount-vertical-range").val("$" + $("#slider-range-vertical").slider("values", 0) +
  26. " - $" + $("#slider-range-vertical").slider("values", 1));
  27. });
  28. $(function() {
  29. "use strict";
  30. $("#slider-range").slider({
  31. range: true,
  32. min: 0,
  33. max: 500,
  34. values: [75, 300],
  35. slide: function(event, ui) {
  36. $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
  37. }
  38. });
  39. $("#amount").val("$" + $("#slider-range").slider("values", 0) +
  40. " - $" + $("#slider-range").slider("values", 1));
  41. });
  42. $(function() {
  43. "use strict";
  44. $("#slider-vertical").slider({
  45. orientation: "vertical",
  46. range: "min",
  47. min: 0,
  48. max: 100,
  49. value: 60,
  50. slide: function(event, ui) {
  51. $("#amount3").val(ui.value);
  52. }
  53. });
  54. $("#amount3").val($("#slider-vertical").slider("value"));
  55. });
  56. $(function() {
  57. "use strict";
  58. // setup master volume
  59. $("#master").slider({
  60. value: 60,
  61. orientation: "horizontal",
  62. range: "min",
  63. animate: true
  64. });
  65. // setup graphic EQ
  66. $("#eq > span").each(function() {
  67. // read initial values from markup and remove that
  68. var value = parseInt($(this).text(), 10);
  69. $(this).empty().slider({
  70. value: value,
  71. range: "min",
  72. animate: true,
  73. orientation: "vertical"
  74. });
  75. });
  76. });