.mblSlider { margin: 15px; border-style: inset; border-width: 1px; border-radius: 2px; background-image: -webkit-gradient(linear, left top, left bottom, from(#bdbebd), to(#f7f3f7)); -webkit-user-select: none; -webkit-box-sizing: content-box; border-color: #b0b0b0; } .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 { border-radius: 2px; background-image: -webkit-gradient(linear, left top, left bottom, from(#00a200), to(#00d300), color-stop(0.2, #00ba00), color-stop(0.2, #00ba00)); } .mblSliderHandle { margin: -10px 0 0 -10px; width: 18px; height: 18px; border-style: outset; border-width: 1px; border-radius: 2px; background-image: -webkit-gradient(linear, left top, left bottom, from(#9c9a9c), to(#848284)); border-color: #9d9d9d; } .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); }