.slider-container { position: relative; width: 138px; height: 304px; // background-color: transparent; border-radius: 36px; overflow: hidden; touch-action: none; border: solid 4px #00ffff; box-sizing: border-box; background: linear-gradient(to bottom,red,#00ffff); } .slider-top{ position: absolute; width: 100%; background-color: #000; transform: height 0.2s; } .slider-bar { position: absolute; width: 100%; background-color: transparent; // background-color: #00ffff; bottom: 0; transition: height 0.2s; } .slider-handle { position: absolute; bottom: 0; width: 100%; text-align: center; color: #fff; }