.SliderWrapper { text-align: center; position: absolute; bottom: 40px; left: 0; pointer-events: none; right: 0; z-index: 20; } .SliderControl { max-width: 60%; padding: 4px; box-sizing: border-box; display: block; width: 100%; margin: 0 auto; marginTop: 10px; cursor: pointer; color: inherit; background-color: rgba(255, 255, 255, 0.20); background-clip: 'content-box'; border-radius: 999px; -webkit-appearance: none; appearance: none; pointer-events: auto; } .SliderControl::-webkit-slider-thumb { width: 22px; height: 22px; background: #474A4E; box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.50); border: 2px solid white; border-radius: 999px; -webkit-appearance: none; } .SliderControl::-moz-range-thumb { width: 22px; height: 22px; background: #474A4E; box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.50); border: 2px solid white; border-radius: 999px; appearance: none; } .SliderControl::-ms-track { background-color: transparent; border-color: transparent; border-radius: 999px; box-sizing: border-box; color: transparent; cursor: pointer; display: block; height: 30px; margin: 0 auto; max-width: 60%; padding: 4px; pointer-events: auto; width: 100%; } .SliderControl::-ms-thumb { background: #474A4E; border: 2px solid white; border-radius: 999px; box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.50); height: 22px; width: 22px; } .SliderControl::-ms-fill-lower, .SliderControl::-ms-fill-upper, .SliderControl::-ms-tooltip { display: none; } .SliderControl:focus { outline: none; }