input.maxRange {
    position: relative;
    pointer-events: none;

    &::-webkit-slider-runnable-track {
        background: var(--theme-gray-dark);

        border-radius: 8px;

        z-index: 1;
        overflow:hidden;
    }

    &::-webkit-slider-thumb {   
        -webkit-appearance: none;
        width: 16px;
        height: 16px;
       
        border: none;

        pointer-events: auto;
        box-shadow: -72px 0 0 64px var(--theme-accent-2-light);
        background: var(--theme-accent-2-base);
        border-radius: 32px;
        z-index: 2;  
    }


    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    background: transparent;
    height: 8px; /* Specified height */
}

input.minRange {
    position: absolute;
    right: 3px;
    top:2px;
    margin:0px;
    pointer-events: none;

    &::-webkit-slider-thumb {
        pointer-events: auto;

    }

    &::-webkit-slider-runnable-track {
        background: transparent;

        border-radius: 8px;


        z-index: 1;
        overflow:hidden;
    }

    &::-webkit-slider-thumb {   
        -webkit-appearance: none;
        width: 16px;
        height: 16px;
       
        border: none;

        pointer-events: auto;
        box-shadow: -72px 0 0 64px var(--theme-gray-dark);
        background: var(--theme-accent-2-base);
        border-radius: 32px;
        z-index: 3;  
    }

    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

.thumbDisable::-webkit-slider-thumb {
    pointer-events: none !important;
}