.am-slider { position: relative; } .am-slider-rail { position: absolute; width: 100%; background-color: #ddd; height: 2px; -webkit-box-sizing: border-box; box-sizing: border-box; } .am-slider-track { position: absolute; left: 0; height: 2px; border-radius: 2px; background-color: #108ee9; } .am-slider-handle { position: absolute; margin-left: -12px; margin-top: -10px; width: 22px; height: 22px; cursor: pointer; border-radius: 50%; border: 2px solid #108ee9; background-color: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; } .am-slider-handle:focus { background-color: #40a5ed; } .am-slider-mark { position: absolute; top: 20px; left: 0; width: 100%; font-size: 12px; } .am-slider-mark-text { position: absolute; display: inline-block; vertical-align: middle; text-align: center; cursor: pointer; color: #000; } .am-slider-mark-text-active { opacity: 0.3; } .am-slider-step { position: absolute; width: 100%; height: 4px; background: transparent; } .am-slider-dot { position: absolute; bottom: -5px; margin-left: -4px; width: 12px; height: 12px; border: 2px solid #ddd; background-color: #fff; cursor: pointer; border-radius: 50%; vertical-align: middle; } .am-slider-dot:first-child { margin-left: -4px; } .am-slider-dot:last-child { margin-left: -4px; } .am-slider-dot-active { border-color: #108ee9; } .am-slider-disabled { opacity: 0.3; } .am-slider-disabled .am-slider-track { height: 2px; } .am-slider-disabled .am-slider-handle, .am-slider-disabled .am-slider-mark-text, .am-slider-disabled .am-slider-dot { cursor: not-allowed; -webkit-box-shadow: none; box-shadow: none; }