ShadowDOM Music Note

A-Pen-by-Russell.markdown

A Pen by Russell

A Pen by Russell on CodePen.

License.

index.html

<input class="notePicker" type="range" name="points" min="1" max="7" value="1" />

style.stylus

$h = 200px;
$w = 300px;
$bgsize = 53px;

.notePicker {
    transform-origin: 60% 75%;
    transform: rotate(-90deg);
    width: $w;
    height: $h;
    &::-webkit-slider-thumb {
        box-shadow: inset 0 0 10px 10px #000;    
        border-radius: 50%;
        margin-top: ($h/2.5);
        transform: scale(2);
        &:after {
          content: '';
          display: block;
          width: 50px;
          height: 1px;
          background-color: #000;
          position: absolute;
          bottom: 10%;
          left: 70%;
        }
    }

    &::-webkit-slider-runnable-track {
        background-color: #fff;
        background-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.5) 1%, transparent 2%);
        background-size: $bgsize $bgsize;
        background-position: 7px 0;
        height: $h;
    }
}