#212121
1/* level settings ๐ */ 2 3.slider { 4 /* slider */ 5 --slider-width: 100%; 6 --slider-height: 6px; 7 --slider-bg: rgb(82, 82, 82); 8 --slider-border-radius: 999px; 9 /* level */ 10 --level-color: #fff; 11 --level-transition-duration: .1s; 12 /* icon */ 13 --icon-margin: 15px; 14 --icon-color: var(--slider-bg); 15 --icon-size: 25px; 16} 17 18.slider { 19 cursor: pointer; 20 display: -webkit-inline-box; 21 display: -ms-inline-flexbox; 22 display: inline-flex; 23 -webkit-box-orient: horizontal; 24 -webkit-box-direction: reverse; 25 -ms-flex-direction: row-reverse; 26 flex-direction: row-reverse; 27 -webkit-box-align: center; 28 -ms-flex-align: center; 29 align-items: center; 30} 31 32.slider .volume { 33 display: inline-block; 34 vertical-align: top; 35 margin-right: var(--icon-margin); 36 color: var(--icon-color); 37 width: var(--icon-size); 38 height: auto; 39} 40 41.slider .level { 42 -webkit-appearance: none; 43 -moz-appearance: none; 44 appearance: none; 45 width: var(--slider-width); 46 height: var(--slider-height); 47 background: var(--slider-bg); 48 overflow: hidden; 49 border-radius: var(--slider-border-radius); 50 -webkit-transition: height var(--level-transition-duration); 51 -o-transition: height var(--level-transition-duration); 52 transition: height var(--level-transition-duration); 53 cursor: inherit; 54} 55 56.slider .level::-webkit-slider-thumb { 57 -webkit-appearance: none; 58 width: 0; 59 height: 0; 60 -webkit-box-shadow: -200px 0 0 200px var(--level-color); 61 box-shadow: -200px 0 0 200px var(--level-color); 62} 63 64.slider:hover .level { 65 height: calc(var(--slider-height) * 2); 66}
ย
7.4K views
7.4K views
Comments
1alexandrubk 30. September at 15:06
30. September at 15:06
looks like ios volume
MIT License