slider.css 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. uni-slider {
  2. margin: 10px 18px;
  3. padding: 0;
  4. display: block;
  5. }
  6. uni-slider[hidden] {
  7. display: none;
  8. }
  9. uni-slider .uni-slider-wrapper {
  10. display: -webkit-flex;
  11. display: flex;
  12. -webkit-align-items: center;
  13. align-items: center;
  14. min-height: 16px;
  15. }
  16. uni-slider .uni-slider-tap-area {
  17. -webkit-flex: 1;
  18. flex: 1;
  19. padding: 8px 0;
  20. }
  21. uni-slider .uni-slider-handle-wrapper {
  22. position: relative;
  23. height: 2px;
  24. border-radius: 5px;
  25. background-color: #e9e9e9;
  26. cursor: pointer;
  27. transition: background-color 0.3s ease;
  28. -webkit-tap-highlight-color: transparent;
  29. }
  30. uni-slider .uni-slider-track {
  31. height: 100%;
  32. border-radius: 6px;
  33. background-color: #007aff;
  34. transition: background-color 0.3s ease;
  35. }
  36. uni-slider .uni-slider-handle,
  37. uni-slider .uni-slider-thumb {
  38. position: absolute;
  39. left: 50%;
  40. top: 50%;
  41. cursor: pointer;
  42. border-radius: 50%;
  43. transition: border-color 0.3s ease;
  44. }
  45. uni-slider .uni-slider-handle {
  46. width: 28px;
  47. height: 28px;
  48. margin-top: -14px;
  49. margin-left: -14px;
  50. background-color: transparent;
  51. z-index: 3;
  52. cursor: grab;
  53. }
  54. uni-slider .uni-slider-thumb {
  55. z-index: 2;
  56. box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  57. }
  58. uni-slider .uni-slider-step {
  59. position: absolute;
  60. width: 100%;
  61. height: 2px;
  62. background: transparent;
  63. z-index: 1;
  64. }
  65. uni-slider .uni-slider-value {
  66. width: 3ch;
  67. color: #888;
  68. font-size: 14px;
  69. margin-left: 1em;
  70. }
  71. uni-slider .uni-slider-disabled .uni-slider-track {
  72. background-color: #ccc;
  73. }
  74. uni-slider .uni-slider-disabled .uni-slider-thumb {
  75. background-color: #fff;
  76. border-color: #ccc;
  77. }