CSS Input Range Generator

Today

Style the thumb, track and progress fill with matched WebKit and Firefox output

64%

Input range

Thumb shape

Preview value64%

Width320px

Thumb size22px

Thumb radius50px

Thumb border2px

Thumb shadow10px

Track height7px

Track radius10px

Thumb

Thumb border

Track

Progress

Preview

Progress fill

CSS

.styled-range {
    --range-progress: 64%;
    appearance: none;
    width: min(320px, 100%);
    height: 7px;
    border: 0px solid #52525b;
    border-radius: 10px;
    background: linear-gradient(to right, #7c5cff 0 var(--range-progress), #34343c var(--range-progress) 100%);
    cursor: pointer;
}

.styled-range::-webkit-slider-runnable-track {
    height: 7px;
    border-radius: 10px;
    background: transparent;
}

.styled-range::-webkit-slider-thumb {
    appearance: none;
    width: 22px;
    height: 22px;
    margin-top: -7.5px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #7c5cff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
    transform: none;
}

.styled-range::-moz-range-track {
    height: 7px;
    border-radius: 10px;
    background: #34343c;
}

.styled-range::-moz-range-progress {
    height: 7px;
    border-radius: 10px;
    background: #7c5cff;
}

.styled-range::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #7c5cff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
    transform: none;
}

.styled-range:focus-visible {
    outline: 2px solid #7c5cff;
    outline-offset: 6px;
}

HTML

Just click on the desired preset

VioletSelected

Lime

Minimal

Soft

Ocean

Orange

Terminal

Candy

Glass

Cobalt

Feedback

Utility Lab

Utility Lab

CSS Input Range Generator