.slider {
    touch-action: manipulation;
    padding: 27px 10px 3px;
    display: inline-block;
    margin: 5px;
}

.track {
    width: 100px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid var(--gray);
    background-color: white;

    position: relative;
    cursor: pointer;
}

.track::before, .track::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    background-size: cover;
    bottom: calc(100% + 5px);
}

.track::before {
    background-image: url("https://umimeto.org/asset/global/img/speed-turtle.svg");
    left: -10px;
}
.track::after {
    background-image: url("https://umimeto.org/asset/global/img/speed-hare.svg");
    right: -10px;
}

.handle {
    width: 17px;
    height: 17px;
    border-radius: 3px;
    border: 1px solid var(--gray);
    background-color: var(--lightGray);

    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);

    touch-action: none;
}

.handle:focus {
    border-color: var(--grayHover);
}

@media screen and (pointer: coarse) {
    .track {
        width: 200px;
        height: 17px;
    }
    .handle {
        width: 32px;
        height: 32px;
    }
}