.slider { display: inline-block; vertical-align: middle; position: relative; } .slider.slider-horizontal { width: 210px; height: 20px; } .slider.slider-horizontal .slider-track { height: 4px; width: 100%; margin-top: -2px; top: 50%; left: 0; } .slider.slider-horizontal .slider-selection { height: 100%; top: 0; bottom: 0; } .slider.slider-horizontal .slider-handle { margin-left: -10px; margin-top: -10px; } .slider.slider-horizontal .slider-handle.triangle { border-color: transparent; box-shadow: none; -webkit-box-shadow: none; border-width: 0 10px 10px 10px; width: 0; height: 0; border-bottom-color: #8ec165; margin-top: 0; } .slider.slider-vertical { height: 210px; width: 20px; } .slider.slider-vertical .slider-track { width: 4px; height: 100%; margin-left: -2px; left: 50%; top: 0; } .slider.slider-vertical .slider-selection { width: 100%; left: 0; top: 0; bottom: 0; } .slider.slider-vertical .slider-handle { margin-left: -10px; margin-top: -10px; } .slider.slider-vertical .slider-handle.triangle { border-width: 10px 0 10px 10px; width: 1px; height: 1px; border-left-color: #fff; margin-left: 0; } .slider input { display: none; } .slider .tooltip-inner { white-space: nowrap; } .slider-track { position: absolute; cursor: pointer; background-color: #fff; border: 1px solid #eee; border-radius: 5px; } .slider-selection { position: absolute; background-color: #4cc0c1; border: 1px solid #4cc0c1; border-radius: 5px; } .slider-handle { outline: none; position: absolute; width: 20px; height: 20px; background-color: #fff; border: 1px solid #eee; border-color: rgba(0,0,0,0.1); -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.15); box-shadow: 1px 1px 3px rgba(0,0,0,0.15); } .slider-handle.round { border-radius: 20px; } .slider-handle.triangle { background: transparent none; }