[해피CGI][cgimall] Input range kawaii style (HTML + CSS only)

input tyle="range" 슬라이드 디자인 입니다.
사이트 꾸미기에 좋을거 같습니다.
HTML과 CSS로 제작되었습니다.
자세한 내용은 데모를 확인해 주시기 바랍니다.

HTML

<input type="range" class="kawaii" min="1" max="20" value="7" /> <input type="range" class="kawaii" min="1" max="20" value="4" style="--base: #8cc8e4;" /> <input type="range" class="kawaii" min="1" max="20" value="12" style="--base: #6cc484;" />

 

 

CSS

body{   margin: 0;   min-height: 100vh;   display: flex;   align-items: center;   justify-content: center;   flex-direction: column;   flex-wrap: wrap;   gap: 2em;   background: #f6f8fe; }   [type="range"].kawaii {   --base: #fe8ce4;   --light: color-mix(in sRGB, var(--base) 60%, #fff);   --lighter: color-mix(in sRGB, var(--base) 30%, #fff);   --dark: color-mix(in sRGB, var(--base) 95%, #000);;   --transparent: color-mix(in sRGB, var(--base) 0%, #0000);   appearance: none;   font-size: 1em;   width: 20em;   height: 2em;   border: 0.5em solid #fff;   border-radius: 2em;   box-shadow:     0 0 1em #0001,      0 0.25em 0.5em #0001;   overflow: hidden; }   [type="range"].kawaii::-webkit-slider-runnable-track {   background:      radial-gradient(circle at 0.75em 0.6em, var(--light) calc(0.2em - 1px), #0000 0.2em),     radial-gradient(circle at 1.25em 0.6em, var(--light) calc(0.2em - 1px), #0000 0.2em),     radial-gradient(circle at 5em 0.6em, var(--light) calc(0.2em - 1px), #0000 0.2em),     linear-gradient(var(--light) 0 0) 1.25em 0.4em / 3.75em calc(0.4em - 0.5px) no-repeat,     linear-gradient(90deg, var(--base), var(--transparent) 1em),     linear-gradient(#0000 70%, var(--dark) 80%),     var(--base);   border-radius: 2em;   height: 100%;   overflow: hidden; }   [type="range"].kawaii::-webkit-slider-thumb {   appearance: none;   height: 2em;   width: 2em;   color: var(--lighter);   background:     radial-gradient(circle at 0.75em 0.6em, var(--light) calc(0.2em - 1px), #0000 0.2em),     linear-gradient(90deg, #0000 0.75em, var(--base) 0) 0 0 / 100% 50% no-repeat;   border-radius: 50%; 0 50% 50% 0;   box-shadow:      inset -0.5em 0 0.5em -0.25em var(--base),      1em 0 0 0.25em,      2em 0 0 0.25em,      3em 0 0 0.25em,      4em 0 0 0.25em,      5em 0 0 0.25em,      6em 0 0 0.25em,      7em 0 0 0.25em,      8em 0 0 0.25em,      9em 0 0 0.25em,     10em 0 0 0.25em,     11em 0 0 0.25em,     12em 0 0 0.25em,     12em 0 0 0.25em,     13em 0 0 0.25em,     14em 0 0 0.25em,     15em 0 0 0.25em,     16em 0 0 0.25em,     17em 0 0 0.25em,     18em 0 0 0.25em,     19em 0 0 0.25em; }    [type="range"].kawaii::-moz-range-track {    background:      radial-gradient(circle at 0.75em 30%, var(--light) calc(0.2em - 1px), #0000 0.2em),     radial-gradient(circle at 1.5em 30%, var(--light) calc(0.2em - 1px), #0000 0.2em),     radial-gradient(circle at 5.5em 30%, var(--light) calc(0.2em - 1px), #0000 0.2em),     linear-gradient(var(--light) 0 0) 1.5em calc(15% + 0.18em) / 4em calc(0.4em - 0.5px) no-repeat,     linear-gradient(90deg, var(--base), var(--transparent) 1em),     linear-gradient(var(--transparent) 70%, var(--dark) 80%),     var(--base);   border-radius: 2em;   height: 100%;   overflow: hidden; }   [type="range"].kawaii::-moz-range-thumb {   appearance: none;   height: 2em;   width: 2em;   border: 0;   color: var(--lighter);   background:     radial-gradient(circle at 0.75em 0.6em, var(--light) calc(0.2em - 1px), #0000 0.2em),     linear-gradient(90deg, var(--transparent) 0.75em, var(--base) 0) 0 0 / 100% 50% no-repeat;   border-radius: 50%; 0 50% 50% 0;   box-shadow:      inset -0.5em 0 0.5em -0.25em var(--base),      1em 0 0 0.25em,      2em 0 0 0.25em,      3em 0 0 0.25em,      4em 0 0 0.25em,      5em 0 0 0.25em,      6em 0 0 0.25em,      7em 0 0 0.25em,      8em 0 0 0.25em,      9em 0 0 0.25em,     10em 0 0 0.25em,     11em 0 0 0.25em,     12em 0 0 0.25em,     12em 0 0 0.25em,     13em 0 0 0.25em,     14em 0 0 0.25em,     15em 0 0 0.25em,     16em 0 0 0.25em,     17em 0 0 0.25em,     18em 0 0 0.25em,     19em 0 0 0.25em; }