:root {
    --dark-color: #000000;
    --main-blue: #53A7C4;
}

div.slider {
    width: 100%;
}

.slider-container {
    position:relative;
}

.slider-animation {
    position: absolute;
    top: 25%;
    bottom: 0;
    left: 0;
    right: 0;
    background: radial-gradient(circle at 4px, black 4px, transparent 1px), linear-gradient(90deg, black 0, black 0) repeat-x 20px 3px;
    background-size: 16.6666666667% 8px, 100% 2px;
    height: 8px;
    z-index: 0;
    margin: 0 8px;
}

.slider-animation::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dark-color);
    position: absolute;
    right: 0;
    top: 0px;
}

#sliderValue {
    margin-top: -0.2rem;
}

div.slider div span {
    text-align: center;
    font-weight: 400;
}

input[type='range'].n {
display: block;
margin: 1em auto 0;
padding: 0;
background: transparent;
font-size: 1em;
cursor: pointer;
width: 100%;
position: relative;
z-index: 1;
}

input[type='range'].n, input[type='range'].n::-webkit-slider-runnable-track, input[type='range'].n::-webkit-slider-thumb {
    -webkit-appearance: none;
}

input[type='range'].n::-ms-track {
    border: none;
    color: transparent;
    background: transparent;
}

input[type='range'].n::-webkit-slider-thumb {
    border: none;
    border-radius: 50%;
    box-sizing: border-box;
    border: solid 0.35em transparent solid 0.25em transparent;
    border: solid white;
    width: 1.3em;
    height: 1.3em;
    background: var(--main-blue);
    background-clip: content-box;
    position: relative;
    z-index: 10;
    margin-top: -.1em;
    margin-left: .05em;
}

input[type='range'].n::-moz-range-thumb {
    border: none;
    border-radius: 50%;
    box-sizing: border-box;
    border: solid 0.35em transparent solid 0.25em transparent;
    border: solid white 1px;
    width: 1.3em;
    height: 1.3em;
    background: var(--main-blue);
    background-clip: content-box;
    position: relative;
    z-index: 10;
    margin-top: -.1em;
    margin-left: .05em;
    z-index: 1000;
}

input[type='range'].n::-ms-thumb {
    border: none;
    border-radius: 50%;
    box-sizing: border-box;
    border: solid 0.35em transparent solid 0.25em transparent;
    width: 1.3em;
    height: 1.3em;
    background: var(--main-blue);
    background-clip: content-box;
    position: relative;
    z-index: 10;
    margin-top: -.1em;
    margin-left: .05em;
}

input[type='range'].n::-ms-tooltip {
    display: none;
}

input[type='range'].n:focus {
    outline: none;
}

input[type='range'].n.n2:before {
    background-size: 100% 1em, 100% 0.25em;
}

input[type='range'].n.n3:before {
    background-size: 50% 1em, 100% 0.25em;
}

input[type='range'].n.n4:before {
    background-size: 33.3333333333% 1em, 100% 0.25em;
}

input[type='range'].n.n5:before {
    background-size: 25% 1em, 100% 0.25em;
}

input[type='range'].n.n6:before {
    background-size: 20% 1em, 100% 0.25em;
}

input[type='range'].n.n7:before {
    background-size: 16.6666666667% 1em, 100% 0.15em;
}

input[type='range'].n.n8:before {
    background-size: 14.2857142857% 1em, 100% 0.25em;
}

input[type='range'].n.n9:before {
    background-size: 12.5% 1em, 100% 0.25em;
}

input[type='range'].n.n10:before {
    background-size: 11.1111111111% 1em, 100% 0.25em;
}

input[type='range'].n.n12:before {
    background-size: 9.09090909% 1rem, 100% 0.15rem;
}