/* === Range Slider === */ .range-slider { display: block; width: 100%; position: relative; align-self: center; cursor: pointer; user-select: none; input[type="range"] { display: none; } } .range-bar { position: absolute; left: 0; top: 50%; width: 100%; overflow: hidden; } .range-bar-active { position: absolute; .ltr({ left: 0; }); .rtl({ right: 0; }); top: 0; height: 100%; } .range-knob-wrap { z-index: 20; position: absolute; top: 50%; .ltr({ left: 0; }); .rtl({ right: 0; }); } .range-knob { box-sizing: border-box; border-radius: 50%; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; &:after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin-left: -22px; margin-top: -22px; } } .range-knob-label { position: absolute; left: 50%; bottom: 100%; text-align: center; transition-duration: 120ms; transition-property: transform; transform: translateY(100%) scale(0); } .range-knob-active-state .range-knob-label { transform: translateY(0%) scale(1); } & when (@includeIosTheme) { @import url('./range-ios.less'); } & when (@includeMdTheme) { @import url('./range-md.less'); }