slider.css 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. /* jQuery UI Slider */
  2. .ui-slider {
  3. position: relative;
  4. text-align: left;
  5. }
  6. .ui-slider .ui-slider-handle,
  7. .ui-slider .ui-slider-range,
  8. .ui-slider-horizontal,
  9. .ui-slider-vertical {
  10. -webkit-border-radius: 100px;
  11. -moz-border-radius: 100px;
  12. border-radius: 100px;
  13. }
  14. .ui-slider .ui-slider-handle {
  15. position: absolute;
  16. z-index: 2;
  17. width: 8px;
  18. height: 8px;
  19. border: #FFF solid 6px;
  20. box-sizing: initial;
  21. cursor: pointer;
  22. box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  23. }
  24. .ui-slider .ui-slider-handle:active,
  25. .ui-slider .ui-slider-handle:hover {
  26. border-color: #fff;
  27. }
  28. .ui-slider .ui-slider-range {
  29. position: absolute;
  30. z-index: 1;
  31. display: block;
  32. border: 0;
  33. }
  34. .ui-slider.ui-state-disabled .ui-slider-handle,
  35. .ui-slider.ui-state-disabled .ui-slider-range {
  36. filter: inherit;
  37. }
  38. .ui-slider-horizontal {
  39. height: 7px;
  40. background: #ddd;
  41. -webkit-box-shadow: inset 0 1px 6px #717171;
  42. -moz-box-shadow: inset 0 1px 6px #717171;
  43. box-shadow: inset 0 1px 6px #717171;
  44. }
  45. .ui-slider-horizontal .ui-slider-handle {
  46. top: -7px;
  47. margin-left: -7px;
  48. }
  49. .ui-slider-horizontal .ui-slider-range {
  50. top: 0;
  51. height: 100%;
  52. opacity: .60;
  53. -moz-opacity: .60;
  54. filter: alpha(opacity: 60);
  55. }
  56. .ui-slider-horizontal .ui-slider-range-min {
  57. left: 0;
  58. }
  59. .ui-slider-horizontal .ui-slider-range-max {
  60. right: 0;
  61. }
  62. .ui-slider-vertical {
  63. width: 7px;
  64. height: 100px;
  65. background: #ddd;
  66. -webkit-box-shadow: inset 1px 0 6px #717171;
  67. -moz-box-shadow: inset 1px 0 6px #717171;
  68. box-shadow: inset 1px 0 6px #717171;
  69. }
  70. .ui-slider-vertical .ui-slider-handle {
  71. left: -7px;
  72. margin-bottom: -8px;
  73. margin-left: 0;
  74. }
  75. .ui-slider-vertical .ui-slider-range {
  76. left: 0;
  77. width: 100%;
  78. opacity: .60;
  79. -moz-opacity: .60;
  80. filter: alpha(opacity: 60);
  81. }
  82. .ui-slider-vertical .ui-slider-range-min {
  83. bottom: 0;
  84. }
  85. .ui-slider-vertical .ui-slider-range-max {
  86. top: 0;
  87. }