.slidecontainer { margin-bottom: 5px; margin-top: 5px; height: 30px; width: 100%; } .slider_table { margin: auto; width: 90%; } .slider { background: silver; border-radius: 5px; height: 10px; opacity: 0.75; outline: none; width: 80%; -webkit-appearance: none; } .slider:focus { outline: none !important; } .slider:hover { opacity: 1; } .slider::-webkit-slider-thumb { background: purple; border-radius: 50%; cursor: pointer; height: 20px; width: 20px; -webkit-appearance: none; } .slider::-moz-range-thumb { background: purple; border-radius: 50%; cursor: pointer; height: 20px; width: 20px; }