How to use same CSS for different pseudo-elements for different browsers?

Question

I have same css for both range track and range thumbs for chrome and firefox browsers. .range-input is on input tag. Here the code:

.range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 50px;
    width: 50px;
    border-radius: 100%;
    margin-top: -20px;
    background-color: hsl(var(--strong-cyan));
    background-image: url('./assets/images/icon-slider.svg');
    background-size: 55%;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 15px 40px 0 hsl(var(--strong-cyan));
    cursor: pointer;
}

.range-input::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 50px;
    width: 50px;
    border-radius: 100%;
    margin-top: -20px;
    background-color: hsl(var(--strong-cyan));
    background-image: url('./assets/images/icon-slider.svg');
    background-size: 55%;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 15px 40px 0 hsl(var(--strong-cyan));
    cursor: pointer;
}

But when I try to do this:

.range-input::-webkit-slider-thumb, .range-input::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 50px;
    width: 50px;
    border-radius: 100%;
    margin-top: -20px;
    background-color: hsl(var(--strong-cyan));
    background-image: url('./assets/images/icon-slider.svg');
    background-size: 55%;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 15px 40px 0 hsl(var(--strong-cyan));
    cursor: pointer;
}

It stops working. Here is the whole css:

.range-input {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 999px;
}

.range-input::-webkit-slider-runnable-track {
    height: var(--range-track-height);
}

.range-input::-moz-range-track {
    height: var(--range-track-height);
}

.range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 50px;
    width: 50px;
    border-radius: 100%;
    margin-top: -20px;
    background-color: hsl(var(--strong-cyan));
    background-image: url('./assets/images/icon-slider.svg');
    background-size: 55%;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 15px 40px 0 hsl(var(--strong-cyan));
    cursor: pointer;
}

.range-input::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 50px;
    width: 50px;
    border-radius: 100%;
    margin-top: -20px;
    background-color: hsl(var(--strong-cyan));
    background-image: url('./assets/images/icon-slider.svg');
    background-size: 55%;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 15px 40px 0 hsl(var(--strong-cyan));
    cursor: pointer;
}

.range-input::-webkit-slider-thumb:hover {
    filter: brightness(90%);
    transition: all 0.08s ease;
}

.range-input::-moz-range-thumb:hover {
    filter: brightness(90%);
    transition: all 0.08s ease;
}

Is it something I don't know about css selectors or is it supposed to work like that? How could I fix it?