.customSliderCon {
    touch-action: none;
}

.customSlider {
    position: relative;
    background: transparent !important;
    border-radius: inherit;
    z-index: 1;
}

/* Base Track */
.customSlider::-webkit-slider-runnable-track,
.customSlider::-moz-range-track,
.customSlider::-ms-track {
    width: 100%;
    height: 0.75rem;
    background: transparent;
    border-radius: 1rem;
    cursor: pointer;
}

/* Progress Track */
.customSliderCon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: .5;
    mix-blend-mode: overlay;
    background: linear-gradient(to top, #000, #fff);
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

/* Progress Track */
.customSliderCon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: var(--glow);
    filter: blur(7px);
    -webkit-filter: blur(7px);
    mix-blend-mode: hard-light;
    opacity: var(--glow-opacity);
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

/* Progress Track */
.customSlider::before {
    content: '';
    position: absolute;
    top: .2em;
    right: .6em;
    height: .2em;
    width: calc(var(--lastSecWidth)*0.25);
    background: #fff;
    pointer-events: none;
    z-index: 2;
    border-radius: 1em;
}

/* Progress Track */
.customSlider::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: var(--lastSecWidth);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}


/* Thumb (the draggable part) */
.customSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1em;
    height: 1em;
    background: #9E70FD;
    border-radius: 50%;
    cursor: pointer;
    -webkit-transition: width 0.3s ease, height 0.3s ease;
    transition: width 0.3s ease, height 0.3s ease;
    z-index: 2;
    position: relative;
    box-shadow: 0 0 0 0.1em #f4e5ff, 0 0 0.4em 0.2em #00000040;
}

.customSlider::-moz-range-thumb,
.customSlider::-ms-thumb {
    width: 1em;
    height: 1em;
    background: #9E70FD;
    border-radius: 50%;
    cursor: pointer;
    -moz-transition: width 0.3s ease, height 0.3s ease;
    -ms-transition: width 0.3s ease, height 0.3s ease;
    transition: width 0.3s ease, height 0.3s ease;
    position: relative;
    z-index: 2;
    box-shadow: 0 0 0 0.2em #fff, 0 0 0.4em 0.2em #00000040;
}

/* Thumb Hover & Focus States */
.customSlider:hover::-webkit-slider-thumb {
    height: 1.2em;
    width: 1.2em;
}

.customSlider:hover::-moz-range-thumb,
.customSlider:hover::-ms-thumb {
    box-shadow: 0 0 0 2px var(--main);
}