input[type="range"] {
    /* removing default appearance */
    -webkit-appearance: none;
    appearance: none;
    /* creating a custom design */
    width: 100%;
    outline: none;

    /*  slider progress trick  */

    border-radius: 16px;
}

input[type="range"]:focus {
    outline: none;
}

/**** Track Styles ****/
/* Chrome, Safari, Opera, and Edge Chromium */
input[type="range"]::-webkit-slider-runnable-track{
    height: 0.4rem;
    border-radius: 4px;
    border: 1px solid var(--pdfViewerBtnBorderColor);
    filter:drop-shadow(1px 1px 2px rgba(0,0,0,.1));
}
/* Firefox */
input[type="range"]::-moz-range-track {
    height: 0.4rem;
    border-radius: 4px;
    border: 1px solid var(--pdfViewerBtnBorderColor);
    filter:drop-shadow(1px 1px 2px rgba(0,0,0,.1));
}

/**** Thumb Styles ****/
/* Chrome, Safari, Opera, and Edge Chromium */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    margin-top: -8px; /* Centers thumb on the track */
    background-color: white;
    border: 2px solid var(--buttonEnabledForeground);
    height: 1.25rem;
    width: 1.25rem;
    border-radius: 100%;
    cursor: grab;
    transition: .2s ease-in-out;
}
input[type="range"]:active::-webkit-slider-thumb {
    cursor: grabbing;
}
/* Firefox */
input[type="range"]::-moz-range-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    margin-top: -8px; /* Centers thumb on the track */
    background-color: white;
    border: 2px solid var(--buttonEnabledForeground);
    height: 1.25rem;
    width: 1.25rem;
    border-radius: 100%;
    cursor: grab;
    transition: .2s ease-in-out;
}
input[type="range"]:active::-moz-range-thumb {
    cursor: grabbing;
}