.range-slider { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; -webkit-align-items: center; align-items: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; flex-direction: row; justify-content: flex-start; } .range-slider__range { background-color: rgba(0,0,0,.1); height: 5px; width: 67%; padding: 0; cursor: pointer; outline: none; -webkit-transition: background .5s; -moz-transition: background .5s; transition: background .5s; -webkit-appearance: none; } .range-slider__range::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border: none; border-radius: 15px; background-color: #2e86b9; } .range-slider__range::-webkit-slider-thumb:hover { background: #0085ba; } .range-slider__range:active::-webkit-slider-thumb { background: #0085ba; } .range-slider__range::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #0085ba; cursor: pointer; -webkit-transition: background .15s ease-in-out; transition: background .15s ease-in-out; } .range-slider__range::-moz-range-thumb:hover { background: #0085ba; } .range-slider__range:active::-moz-range-thumb { background: #0085ba; } .customize-control input[type=number].range-slider-value, .customize-control input[type=text].range-slider-value { width: 21%; height: 28px; text-align: center; margin-left: 2%; border-radius: 4px; padding: 3px; font-size: 12px; font-weight: 600; color: #555; -moz-appearance: textfield; } .customize-control input[type=number].range-slider-value::-webkit-outer-spin-button, .customize-control input[type=number].range-slider-value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .customize-control input[type=number].range-slider-value { -moz-appearance: textfield; } .range-reset-slider .dashicons{ width: 16px; height: 16px; font-size: 16px; line-height: 1; } .customize-control span.range-reset-slider { display: inline-block; position: relative; width: 6%; line-height: 1; color: rgba(0,0,0,.2); cursor: pointer; text-align: center; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; -ms-transition: all .3s ease; } .customize-control span.range-reset-slider:hover { color: #fe5252; } ::-moz-range-track { background: #d7dcdf; border: 0; } input::-moz-focus-inner, input::-moz-focus-outer { border: 0; } .customize-control-range-value .customize-control-title, .customize-control-range-value .responsive-switchers{ display: inline-block; } .responsive-switchers{ display: inline-block; vertical-align: middle; margin-bottom: 5px; } .responsive-switchers .preview-tablet, .responsive-switchers .preview-mobile{ display: none; } .desktop-range, .tablet-range, .mobile-range{ display: none; width:100%; } .desktop-range.active, .tablet-range.active, .mobile-range.active{ display: block; } .customize-control .responsive-switchers { margin-left: 5px; width: auto; } .customize-control .responsive-switchers-open li button { display: block; } .customize-control .responsive-switchers li { float: left; margin: 0; } .customize-control .responsive-switchers li button { height: 20px; width: 20px; background-color: #a4afb7; cursor: pointer; position: relative; margin-left: 5px; color: #fff; font-size: 10px; text-align: center; border-radius: 50%; padding: 0; border: 0; outline: none; -webkit-transition: background-color .5s; transition: background-color .5s; cursor: pointer; } .customize-control .responsive-switchers li button:hover { background-color: #c2cbd2; } .customize-control .responsive-switchers li button.active { background-color: #13aff0; } .customize-control .responsive-switchers li button i { width: auto; height: auto; font-size: inherit; line-height: 18px; }