UNPKG

coveo-slider

Version:

Coveo's enhanced slider component using HTML5 input range

113 lines (95 loc) 2.91 kB
input[type=range].coveo-slider-input { box-sizing: border-box; width: 100%; height: 20px; padding: 0; margin: 0; -webkit-appearance: none; background-color: transparent; } input[type=range].coveo-slider-input:focus { outline: none; } input[type=range].coveo-slider-input::-webkit-slider-runnable-track { width: 100%; height: 7px; background: #dddddd; border: none; } input[type=range].coveo-slider-input:focus::-webkit-slider-thumb { box-shadow: 0 0 2px 2px rgba(56, 169, 240, 0.75); } input[type=range].coveo-slider-input::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -6px; -webkit-appearance: none; background: #f5f5f5; background: linear-gradient(to top right, #f5f5f5 50%, #ffffff 50%); border: 1px solid #e4e4e4; border-radius: 50%; } input[type=range].coveo-slider-input::-moz-range-track { width: 100%; height: 7px; background: #dddddd; border: none; } input[type=range].coveo-slider-input::-moz-range-thumb { width: 20px; height: 20px; background: #f5f5f5; background: linear-gradient(to top right, #f5f5f5 50%, #ffffff 50%); border: 1px solid #e4e4e4; border-radius: 50%; } input[type=range].coveo-slider-input:focus::-moz-range-thumb { box-shadow: 0 0 2px 2px rgba(56, 169, 240, 0.75); } input[type=range]::-moz-focus-outer { border: 0; } input[type=range].coveo-slider-input::-ms-track { width: 100%; height: 7px; color: transparent; background: transparent; border-color: transparent; border-width: 8px 0; } input[type=range].coveo-slider-input::-ms-thumb { width: 20px; height: 20px; background: #f5f5f5; background: linear-gradient(to top right, #f5f5f5 50%, #ffffff 50%); border: 1px solid #e4e4e4; border-radius: 50%; } input[type=range].coveo-slider-input:focus::-ms-thumb { box-shadow: 0 0 1px 2px rgba(56, 169, 240, 0.75); } input[type=range].coveo-slider-input::-ms-tooltip { display: none; visibility: hidden; } .coveo-slider-labels { position: relative; box-sizing: border-box; height: 1.1em; } .coveo-slider-labels .coveo-slider-label { position: absolute; display: inline-block; white-space: nowrap; } .coveo-slider-ticks { position: relative; z-index: -1; height: 24px; margin-top: -24px; } .coveo-slider-ticks .coveo-slider-tick { position: absolute; display: inline-block; width: 18px; height: 18px; margin-left: -10px; background-color: #dddddd; border-radius: 100%; transform: translate(1px, 1px); } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ CSS styles go here */ input[type=range].coveo-slider-input { height: 27px; padding-top: 1px; } .coveo-slider-ticks { margin-top: -27px; } } /* Firefox fix */ @-moz-document url-prefix() { .coveo-slider-ticks { margin-top: -25px; } } /*# sourceMappingURL=../css/Coveo.Slider.css.map */