.mblSlider { outline: none; -webkit-user-select: none; -webkit-box-sizing: content-box; margin: 15px; border: 1px outset #b5bcc7; background-color: #8fc9ff; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(3.3333333333333335%, rgba(255, 255, 255, 0.1)), color-stop(0.5, rgba(255, 255, 255, 0.6)), color-stop(1, rgba(255, 255, 255, 0.3))); -webkit-border-radius: 2px; } .mblSliderH { width: 200px; height: 8px; } .mblSliderH .mblSliderProgressBar { height: 100%; } .mblSliderH .mblSliderHandle { top: 50%; } .mblSliderV { height: 200px; width: 8px; } .mblSliderV .mblSliderProgressBar { width: 100%; } .mblSliderV .mblSliderHandle { left: 50%; } .mblSliderProgressBar { -webkit-border-radius: 2px; background-color: #0064c2; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(3.3333333333333335%, rgba(255, 255, 255, 0.1)), color-stop(0.5, rgba(255, 255, 255, 0.6)), color-stop(1, rgba(255, 255, 255, 0.3))); } .mblSliderHandle { margin: -10px 0 0 -10px; width: 18px; height: 18px; border: 1px outset #b5bcc7; background-color: #5cb0ff; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(3.3333333333333335%, rgba(255, 255, 255, 0.1)), color-stop(0.5, rgba(255, 255, 255, 0.6)), color-stop(1, rgba(255, 255, 255, 0.3))); -webkit-border-radius: 2px; } .mblSliderTransition { -webkit-transition-duration: 400ms; } .mblSliderTouchBox { margin: 0; padding: 12pt; left: -12pt; top: -12pt; border: none; width: 100%; height: 100%; background-color: transparent; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }