Slider2.scss 707 B

123456789101112131415161718192021222324252627282930313233343536
  1. .slider-container {
  2. position: relative;
  3. width: 138px;
  4. height: 304px;
  5. // background-color: transparent;
  6. border-radius: 36px;
  7. overflow: hidden;
  8. touch-action: none;
  9. border: solid 4px #00ffff;
  10. box-sizing: border-box;
  11. background: linear-gradient(to bottom,red,#00ffff);
  12. }
  13. .slider-top{
  14. position: absolute;
  15. width: 100%;
  16. background-color: #000;
  17. transform: height 0.2s;
  18. }
  19. .slider-bar {
  20. position: absolute;
  21. width: 100%;
  22. background-color: transparent;
  23. // background-color: #00ffff;
  24. bottom: 0;
  25. transition: height 0.2s;
  26. }
  27. .slider-handle {
  28. position: absolute;
  29. bottom: 0;
  30. width: 100%;
  31. text-align: center;
  32. color: #fff;
  33. }