ranger.hmRanger{display:inline-block;position:relative;font-size:0;height:24px}ranger.hmRanger>*{vertical-align:middle}ranger.hmRanger input{display:inline-block;position:relative;border:1px solid #000;height:24px;border-radius:2px;text-align:center}ranger.hmRanger range{display:inline-block;position:relative;width:100px;border:1px solid #000;border-radius:2px;height:12px;margin:0 18px;background-color:#fff}ranger.hmRanger range fill{display:inline-block;position:relative;left:0;width:100%;height:100%}ranger.hmRanger range thumb{position:absolute;display:inline-block;height:24px;width:24px;margin:-7px -13px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAYAAAERAkQoAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABVhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTUtMDgtMjZUMTY6NTM6MTIrMDI6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE2LTA5LTIxVDE1OjMwOjI2KzAyOjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE2LTA5LTIxVDE1OjMwOjI2KzAyOjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4RTc0NzY5NDdGRkYxMUU2QTQ3Q0NCMjhGQzBCQ0NBMSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4RTc0NzY5NTdGRkYxMUU2QTQ3Q0NCMjhGQzBCQ0NBMSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjc3MTNGRkZFRkI0QkU1MTE5Rjk3OEI4MjA1Qzc4Mzk3Ij4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NzEzRkZGRUZCNEJFNTExOUY5NzhCODIwNUM3ODM5NyIgc3RFdnQ6d2hlbj0iMjAxNS0wOC0yNlQxNjo1MzoxMiswMjowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjc3MTNGRkZFRkI0QkU1MTE5Rjk3OEI4MjA1Qzc4Mzk3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjc3MTNGRkZFRkI0QkU1MTE5Rjk3OEI4MjA1Qzc4Mzk3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+7DpzTgAAAG1JREFUeNpi/P//PwMYgBgqajrGAAEEZjCfPXv2P0AAMYNYIMY/BrYtAAHECFcIUgTiMDFAAUAAwbX6+Pj8h7ERskgAIIAQhsAAshYQG0MbYQGAAENx5ts3L59jY2N1DkGjKVN049YDE5gANjYAq6dRdhv0Zl8AAAAASUVORK5CYII=),linear-gradient(to bottom,#efefef,#aeaeae);background-repeat:no-repeat;background-position:center center;box-shadow:1px 1px 2px gray;cursor:pointer;border:1px solid #000;border-radius:2px}ranger.hmRanger range thumb.lower-thumb{left:0}ranger.hmRanger range thumb.upper-thumb{left:100}