纯JS实现的卡通富有创意的滑杆组件

{"code":{"html":"\n0","css":"html,\nbody {\n margin: 0;\n height: 100%;\n}\nbody {\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: #a9cbee;\n}\ninput[type=\"range\"] {\n -webkit-appearance: none;\n background: transparent;\n width: 90%;\n max-width: 500px;\n outline: none;\n}\ninput[type=\"range\"]:focus,\ninput[type=\"range\"]:active,\ninput[type=\"range\"]::-moz-focus-inner,\ninput[type=\"range\"]::-moz-focus-outer {\n border: 0;\n outline: none;\n}\ninput[type=\"range\"]::-moz-range-thumb {\n border: none;\n height: 50px;\n width: 50px;\n background-color: transparent;\n background-image: url(\"../img/thumbs-sprite.png\");\n background-position: 0 0;\n background-size: cover;\n transform: scale(1.9) rotateZ(var(--thumb-rotate, 10deg));\n cursor: pointer;\n}\ninput[type=\"range\"]::-moz-range-thumb:active {\n background-position: 100% 0px;\n transform: scale(2) rotateZ(var(--thumb-rotate, 10deg));\n}\ninput[type=\"range\"]::-moz-range-track {\n width: 100%;\n height: 20px;\n background: #eee;\n border-radius: 10px;\n box-shadow: 2px 2px 4px rgba(0,0,0,0.4);\n cursor: pointer;\n}\ninput[type=\"range\"]::-moz-range-progress {\n height: 20px;\n background: #4685d7;\n border-radius: 10px;\n cursor: pointer;\n}\ninput[type=\"range\"]::-webkit-slider-thumb {\n border: none;\n height: 50px;\n width: 50px;\n background-color: transparent;\n background-image: url(\"https://storage.googleapis.com/pw-stuff/thumbs-sprite.png\");\n background-position: 0 0;\n background-size: cover;\n transform: scale(1.9) rotateZ(var(--thumb-rotate, 10deg));\n cursor: pointer;\n margin-top: -15px;\n -webkit-appearance: none;\n}\ninput[type=\"range\"]::-webkit-slider-thumb:active {\n background-position: 100% 0px;\n transform: scale(2) rotateZ(var(--thumb-rotate, 10deg));\n}\ninput[type=\"range\"]::-webkit-slider-runnable-track {\n width: 100%;\n height: 20px;\n background: #eee;\n border-radius: 10px;\n box-shadow: 2px 2px 4px rgba(0,0,0,0.4);\n cursor: pointer;\n -webkit-appearance: none;\n}\nlabel {\n background: #eee;\n border-radius: 50%;\n box-shadow: 2px 2px 4px rgba(0,0,0,0.4);\n padding: 14px;\n margin-left: 10px;\n font-family: Roboto, 'Helvetica Neue', Arial;\n font-size: 20px;\n width: 25px;\n text-align: center;\n color: #2968bb;\n font-weight: bold;\n content: '';\n}","js":"const input = document.querySelector(\"input\");\nconst label = document.querySelector(\"label\");\n\ninput.addEventListener(\"input\", event => {\n const value = Number(input.value) / 100;\n input.style.setProperty(\"--thumb-rotate\", `${value * 720}deg`);\n label.innerHTML = Math.round(value * 50);\n});"},"options":{"activeKey":"player","hide":{"html":false,"css":false,"js":false},"name":{"html":"HTML","css":"CSS","js":"JavaScript"},"layout":"left","profile":{"html":"","css":"type=\"text/css\"","js":""},"mode":{"html":"htmlmixed","css":"css","js":"javascript"}}}