mapillary-js/styles/SliderComponent.css

.SliderContainer {
    position: absolute;
    bottom: 40px;
    height: 30px;
    width: 405px;
    max-width: 80%;
    min-width: 271px;
    left: 50%;
    padding-left: 5px;
    pointer-events: none;
    transform: translate(-50%, 0);
    z-index: 10;
}

.SliderModeButton,
.SliderModeButtonPressed,
.SliderModeButtonDisabled {
    width: 44px;
    height: 100%;
    display: inline-block;
    pointer-events: auto;
    background: rgba(24, 25, 28, 0.5);
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
}

.SliderModeButton,
.SliderModeButtonPressed {
    cursor: pointer;
}

.SliderModeButtonDisabled {
    cursor: default;
}

.SliderModeIcon {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 1;
    width: 24px;
    height: 24px;
}

.SliderModeIcon {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGRlZnM+PHBhdGggaWQ9IjNkLWEiIGQ9Ik01LjQ0MzI5ODMyLDE4LjM1MDAwMDQgQzQuMzk3ODExMTMsMTguMzUwMDAwNCAzLjUxMzE4MTQsMTguMTg1ODA3NyAyLjc4OTM4MjU4LDE3Ljg1NzQxNzUgQzIuMDY1NTgzNzYsMTcuNTI5MDI3MyAxLjQ2OTEyODg3LDE3LjA5MDA2MzMgMSwxNi41NDA1MTI0IEwyLjM2NzE2ODcxLDE0LjY3MDcwODEgQzIuNzU1ODc1NDksMTUuMDQ2MDExMiAzLjE4MTQzNiwxNS4zNTQyOTEzIDMuNjQzODYzMDMsMTUuNTk1NTU3NSBDNC4xMDYyOTAwNSwxNS44MzY4MjM4IDQuNjEyMjcxNDUsMTUuOTU3NDU1MSA1LjE2MTgyMjQxLDE1Ljk1NzQ1NTEgQzUuNzkxNzk1NDYsMTUuOTU3NDU1MSA2LjI5NDQyNTk5LDE1LjgyNjc3MTIgNi42Njk3MjkwOCwxNS41NjUzOTk0IEM3LjA0NTAzMjE3LDE1LjMwNDAyNzYgNy4yMzI2ODA5LDE0LjkzMjA4MSA3LjIzMjY4MDksMTQuNDQ5NTQ4NSBDNy4yMzI2ODA5LDE0LjE2ODA3MTEgNy4xODI0MTc4NSwxMy45MTM0MDUgNy4wODE4OTAyMywxMy42ODU1NDI0IEM2Ljk4MTM2MjYyLDEzLjQ1NzY3OTggNi44MDM3NjY1LDEzLjI2NjY4MDIgNi41NDkwOTY1NCwxMy4xMTI1Mzc5IEM2LjI5NDQyNjU5LDEyLjk1ODM5NTUgNS45NDU5MzYwOSwxMi44Mzc3NjQyIDUuNTAzNjE0NTksMTIuNzUwNjQwMyBDNS4wNjEyOTMwOSwxMi42NjM1MTYzIDQuNDkxNjQ1MTUsMTIuNjE5OTU1IDMuNzk0NjUzNjksMTIuNjE5OTU1IEwzLjc5NDY1MzY5LDEwLjUyODk5MTEgQzQuMzcxMDEyMDEsMTAuNTI4OTkxMSA0Ljg1MDE4NjQ1LDEwLjQ4ODc4MDcgNS4yMzIxOTEzOSwxMC40MDgzNTg2IEM1LjYxNDE5NjMyLDEwLjMyNzkzNjUgNS45MjI0NzYzOCwxMC4yMTA2NTYgNi4xNTcwNDA4MSwxMC4wNTY1MTM3IEM2LjM5MTYwNTI0LDkuOTAyMzcxMzYgNi41NTkxNDg3NSw5LjcyMTQyNDM3IDYuNjU5Njc2MzcsOS41MTM2NjczIEM2Ljc2MDIwMzk4LDkuMzA1OTEwMjMgNi44MTA0NjcwMyw5LjA3NDcwMDE4IDYuODEwNDY3MDMsOC44MjAwMzAyMyBDNi44MTA0NjcwMyw4LjM3NzcwODczIDYuNjc2NDMyMjMsOC4wMzI1NjkxIDYuNDA4MzU4NTksNy43ODQ2MDA5OCBDNi4xNDAyODQ5NSw3LjUzNjYzMjg3IDUuNzUxNTg0MDEsNy40MTI2NTA2NyA1LjI0MjI0NDEsNy40MTI2NTA2NyBDNC43ODY1MTg5MSw3LjQxMjY1MDY3IDQuMzc0MzYxODgsNy41MTMxNzY3OCA0LjAwNTc2MDYzLDcuNzE0MjMyMDEgQzMuNjM3MTU5MzgsNy45MTUyODcyMyAzLjI1MTgwOTMsOC4xOTAwNTg1OSAyLjg0OTY5ODg1LDguNTM4NTU0MzIgTDEuMzYxODk3Niw2LjcyOTA2NjMxIEMxLjk1MTY1OTYsNi4yMTk3MjY0IDIuNTcxNTcwNTksNS44MjA5NzI4NSAzLjIyMTY0OTE2LDUuNTMyNzkzNjkgQzMuODcxNzI3NzMsNS4yNDQ2MTQ1MyA0LjU5MjE2NDgyLDUuMTAwNTI3MTEgNS4zODI5ODIwNSw1LjEwMDUyNzExIEM2LjAzOTc2MjQ2LDUuMTAwNTI3MTEgNi42Mzk1NjgyMyw1LjE3NzU5NzEzIDcuMTgyNDE3MzUsNS4zMzE3Mzk0NyBDNy43MjUyNjY0Niw1LjQ4NTg4MTgxIDguMTg3Njg2NTUsNS43MTM3NDA5OCA4LjU2OTY5MTQ4LDYuMDE1MzIzODIgQzguOTUxNjk2NDEsNi4zMTY5MDY2NyA5LjI0OTkyMzg2LDYuNjgyMTUxNTIgOS40NjQzODI3Nyw3LjExMTA2OTM0IEM5LjY3ODg0MTY4LDcuNTM5OTg3MTYgOS43ODYwNjk1Myw4LjAzNTkxNTk1IDkuNzg2MDY5NTMsOC41OTg4NzA1OCBDOS43ODYwNjk1Myw5LjI2OTA1NDY4IDkuNjAxNzcxNjcsOS44MzUzNTE3NCA5LjIzMzE3MDQyLDEwLjI5Nzc3ODggQzguODY0NTY5MTYsMTAuNzYwMjA1OCA4LjMzODQ4MjU0LDExLjEzODg1NDEgNy42NTQ4OTQ3NywxMS40MzM3MzUxIEw3LjY1NDg5NDc3LDExLjUxNDE1NjggQzguMzkyMDk3MjcsMTEuNzI4NjE1NyA4Ljk5ODYwNDc4LDEyLjA5Mzg2MDYgOS40NzQ0MzU0OCwxMi42MDk5MDIzIEM5Ljk1MDI2NjE5LDEzLjEyNTk0NDEgMTAuMTg4MTc4LDEzLjc5OTQ2OSAxMC4xODgxNzgsMTQuNjMwNDk3MyBDMTAuMTg4MTc4LDE1LjIyMDI1OTMgMTAuMDYwODQ0OSwxNS43NDYzNDU5IDkuODA2MTc0OTUsMTYuMjA4NzcyOSBDOS41NTE1MDUsMTYuNjcxMTk5OSA5LjIwOTcxNjIzLDE3LjA1OTkwMDkgOC43ODA3OTg0MiwxNy4zNzQ4ODc0IEM4LjM1MTg4MDYsMTcuNjg5ODczOSA3Ljg0OTI1MDA3LDE3LjkzMTEzNjYgNy4yNzI4OTE3NSwxOC4wOTg2ODI2IEM2LjY5NjUzMzQzLDE4LjI2NjIyODYgNi4wODY2NzUwNSwxOC4zNTAwMDA0IDUuNDQzMjk4MzIsMTguMzUwMDAwNCBaIE0xMi43MjE0NjEyLDE4LjEwODczNTMgTDEyLjcyMTQ2MTIsNSBMMTYuNDIwODU4OSw1IEMxNy40MjYxMzUsNSAxOC4zMzA4Nyw1LjEyNzMzMzA3IDE5LjEzNTA5MDksNS4zODIwMDMwMiBDMTkuOTM5MzExOCw1LjYzNjY3Mjk4IDIwLjYyOTU5MTEsNi4wMjg3MjQ3OSAyMS4yMDU5NDk0LDYuNTU4MTcwMjMgQzIxLjc4MjMwNzcsNy4wODc2MTU2NiAyMi4yMjQ2MjI2LDcuNzYxMTQwNTcgMjIuNTMyOTA3Miw4LjU3ODc2NTE2IEMyMi44NDExOTE5LDkuMzk2Mzg5NzYgMjIuOTk1MzMyLDEwLjM2ODE0MjEgMjIuOTk1MzMyLDExLjQ5NDA1MTQgQzIyLjk5NTMzMiwxMi42MTk5NjA3IDIyLjg0MTE5MTksMTMuNTk4NDE0OCAyMi41MzI5MDcyLDE0LjQyOTQ0MyBDMjIuMjI0NjIyNiwxNS4yNjA0NzEzIDIxLjc4OTAwOTQsMTUuOTQ3Mzk5NyAyMS4yMjYwNTQ4LDE2LjQ5MDI0ODggQzIwLjY2MzEwMDIsMTcuMDMzMDk3OSAxOS45ODk1NzUyLDE3LjQzODU1MzIgMTkuMjA1NDU5OSwxNy43MDY2MjY5IEMxOC40MjEzNDQ1LDE3Ljk3NDcwMDUgMTcuNTQ2NzY3MywxOC4xMDg3MzUzIDE2LjU4MTcwMjMsMTguMTA4NzM1MyBMMTIuNzIxNDYxMiwxOC4xMDg3MzUzIFogTTE1LjY3Njk1ODMsMTUuNzE2MTkwMSBMMTYuMjM5OTEwMSwxNS43MTYxOTAxIEMxNi44MDI4NjQ3LDE1LjcxNjE5MDEgMTcuMzEyMTk3LDE1LjY0MjQ3MDkgMTcuNzY3OTIyMiwxNS40OTUwMzA0IEMxOC4yMjM2NDczLDE1LjM0NzU4OTkgMTguNjEyMzQ4MywxNS4xMDk2NzgxIDE4LjkzNDAzNjcsMTQuNzgxMjg3OSBDMTkuMjU1NzI1LDE0LjQ1Mjg5NzcgMTkuNTA3MDQwMywxNC4wMjA2MzU1IDE5LjY4Nzk5LDEzLjQ4NDQ4ODIgQzE5Ljg2ODkzOTcsMTIuOTQ4MzQwOSAxOS45NTk0MTMyLDEyLjI4NDg2ODYgMTkuOTU5NDEzMiwxMS40OTQwNTE0IEMxOS45NTk0MTMyLDEwLjcxNjYzNzggMTkuODY4OTM5NywxMC4wNjMyMTgyIDE5LjY4Nzk5LDkuNTMzNzcyNzIgQzE5LjUwNzA0MDMsOS4wMDQzMjcyOSAxOS4yNTU3MjUsOC41ODIxMTc2NCAxOC45MzQwMzY3LDguMjY3MTMxMTIgQzE4LjYxMjM0ODMsNy45NTIxNDQ1OSAxOC4yMjM2NDczLDcuNzI3NjM2MjkgMTcuNzY3OTIyMiw3LjU5MzU5OTQ3IEMxNy4zMTIxOTcsNy40NTk1NjI2NSAxNi44MDI4NjQ3LDcuMzkyNTQ1MjUgMTYuMjM5OTEwMSw3LjM5MjU0NTI1IEwxNS42NzY5NTgzLDcuMzkyNTQ1MjUgTDE1LjY3Njk1ODMsMTUuNzE2MTkwMSBaIi8+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHVzZSBmaWxsPSIjRkZGRkZGIiB4bGluazpocmVmPSIjM2QtYSIvPjwvZz48L3N2Zz4=');
}

.SliderModeButtonPressed .SliderModeIcon {
    opacity: 0.35;
}

.SliderPositionContainer {
    display: inline-block;
    height: 100%;
    vertical-align: top;
    background: rgba(24, 25, 28, 0.5);
    pointer-events: auto;
    padding-right: 9px;
    padding-left: 3px;
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
}

.SliderPosition {
    pointer-events: auto;
    margin: 0;
    padding: 0;
    margin-top: 7px;
    height: 16px;
    cursor: pointer;
    outline: none;
    background: none;
    -webkit-appearance: none;
}

.SliderPosition::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid white;
    background: #dee5ed;
    cursor: pointer;
    margin-top: -6px;
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.5);
}

.SliderPosition::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background-color: white;
}

.SliderPosition::-moz-focus-outer {
    border: 0;
}

.SliderPosition::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background-color: white;
}

.SliderPosition::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
    background: #dee5ed;
    cursor: pointer;
    margin-top: -6px;
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.5);
}

.SliderPosition::-ms-track {
    height: 2px;
    border-radius: 2px;
    background-color: white;
}

.SliderPosition::-ms-fill-lower {
    height: 0;
    background: none;
}

.SliderPosition::-ms-fill-upper {
    height: 0;
    background: none;
}

.SliderPosition::-ms-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
    background: #dee5ed;
    cursor: pointer;
    margin-top: 0;
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.5);
}

.SliderPosition::-ms-tooltip {
    display: none;
}