mdc-react/dist/slider/index.css

Material Components for the web implemented in React

@-webkit-keyframes mdc-ripple-fg-radius-in{0%{-webkit-animation-timing-function:cubic-bezier(.4,0,.2,1);animation-timing-function:cubic-bezier(.4,0,.2,1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{0%{-webkit-animation-timing-function:cubic-bezier(.4,0,.2,1);animation-timing-function:cubic-bezier(.4,0,.2,1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{0%{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity,0)}}@keyframes mdc-ripple-fg-opacity-in{0%{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity,0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{0%{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity,0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{0%{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity,0)}to{opacity:0}}.mdc-slider__thumb{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-slider__thumb:after,.mdc-slider__thumb:before{border-radius:50%;content:"";opacity:0;pointer-events:none;position:absolute}.mdc-slider__thumb:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-slider__thumb:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-slider__thumb.mdc-ripple-upgraded:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-slider__thumb.mdc-ripple-upgraded:after{left:0;top:0;transform:scale(0);transform-origin:center center}.mdc-slider__thumb.mdc-ripple-upgraded--unbounded:after{left:var(--mdc-ripple-left,0);top:var(--mdc-ripple-top,0)}.mdc-slider__thumb.mdc-ripple-upgraded--foreground-activation:after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-slider__thumb.mdc-ripple-upgraded--foreground-deactivation:after{-webkit-animation:mdc-ripple-fg-opacity-out .15s;animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-slider__thumb:after,.mdc-slider__thumb:before{height:100%;left:0;top:0;width:100%}.mdc-slider__thumb.mdc-ripple-upgraded:after,.mdc-slider__thumb.mdc-ripple-upgraded:before{height:var(--mdc-ripple-fg-size,100%);left:var(--mdc-ripple-left,0);top:var(--mdc-ripple-top,0);width:var(--mdc-ripple-fg-size,100%)}.mdc-slider__thumb.mdc-ripple-upgraded:after{height:var(--mdc-ripple-fg-size,100%);width:var(--mdc-ripple-fg-size,100%)}.mdc-slider__thumb:after,.mdc-slider__thumb:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.mdc-slider__thumb.mdc-ripple-surface--hover:before,.mdc-slider__thumb:hover:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-slider__thumb.mdc-ripple-upgraded--background-focused:before,.mdc-slider__thumb:not(.mdc-ripple-upgraded):focus:before{opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12);transition-duration:75ms}.mdc-slider__thumb:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.mdc-slider__thumb:not(.mdc-ripple-upgraded):active:after{opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12);transition-duration:75ms}.mdc-slider__thumb.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-slider{cursor:pointer;height:48px;margin:0 24px;position:relative;touch-action:pan-y}.mdc-slider .mdc-slider__track{height:4px;position:absolute;top:50%;transform:translateY(-50%);width:100%}.mdc-slider .mdc-slider__track--active,.mdc-slider .mdc-slider__track--inactive{display:flex;height:100%;position:absolute;width:100%}.mdc-slider .mdc-slider__track--active{border-radius:3px;height:6px;overflow:hidden;top:-1px}.mdc-slider .mdc-slider__track--active_fill{border-top:6px solid;box-sizing:border-box;height:100%;position:relative;transform-origin:left;width:100%}.mdc-slider .mdc-slider__track--active_fill[dir=rtl],[dir=rtl] .mdc-slider .mdc-slider__track--active_fill{transform-origin:right}.mdc-slider .mdc-slider__track--inactive{border-radius:2px;height:4px;left:0;top:0}.mdc-slider .mdc-slider__track--inactive:before{border:1px solid transparent;border-radius:inherit;box-sizing:border-box;content:"";height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}@media screen and (forced-colors:active){.mdc-slider .mdc-slider__track--inactive:before{border-color:CanvasText}}.mdc-slider .mdc-slider__track--active_fill{border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.mdc-slider.mdc-slider--disabled .mdc-slider__track--active_fill{border-color:#000;border-color:var(--mdc-theme-on-surface,#000)}.mdc-slider .mdc-slider__track--inactive{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);opacity:.24}.mdc-slider.mdc-slider--disabled .mdc-slider__track--inactive{background-color:#000;background-color:var(--mdc-theme-on-surface,#000);opacity:.24}.mdc-slider .mdc-slider__value-indicator-container{bottom:44px;left:50%;left:var(--slider-value-indicator-container-left,50%);pointer-events:none;position:absolute;right:var(--slider-value-indicator-container-right);transform:translateX(-50%);transform:var(--slider-value-indicator-container-transform,translateX(-50%))}.mdc-slider .mdc-slider__value-indicator{align-items:center;border-radius:4px;display:flex;height:32px;padding:0 12px;transform:scale(0);transform-origin:bottom;transition:transform .1s cubic-bezier(.4,0,1,1) 0ms}.mdc-slider .mdc-slider__value-indicator:before{border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid;bottom:-5px;content:"";height:0;left:50%;left:var(--slider-value-indicator-caret-left,50%);position:absolute;right:var(--slider-value-indicator-caret-right);transform:translateX(-50%);transform:var(--slider-value-indicator-caret-transform,translateX(-50%));width:0}.mdc-slider .mdc-slider__value-indicator:after{border:1px solid transparent;border-radius:inherit;box-sizing:border-box;content:"";height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}@media screen and (forced-colors:active){.mdc-slider .mdc-slider__value-indicator:after{border-color:CanvasText}}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator-container{pointer-events:auto}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator{transform:scale(1);transition:transform .1s cubic-bezier(0,0,.2,1) 0ms}@media(prefers-reduced-motion){.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator,.mdc-slider .mdc-slider__value-indicator{transition:none}}.mdc-slider .mdc-slider__value-indicator-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-subtitle2-font-size,.875rem);font-weight:500;font-weight:var(--mdc-typography-subtitle2-font-weight,500);letter-spacing:.0071428571em;letter-spacing:var(--mdc-typography-subtitle2-letter-spacing,.0071428571em);line-height:1.375rem;line-height:var(--mdc-typography-subtitle2-line-height,1.375rem);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle2-text-transform,inherit)}.mdc-slider .mdc-slider__value-indicator{background-color:#000;opacity:.6}.mdc-slider .mdc-slider__value-indicator:before{border-top-color:#000}.mdc-slider .mdc-slider__value-indicator{color:#fff;color:var(--mdc-theme-on-primary,#fff)}.mdc-slider .mdc-slider__thumb{display:flex;height:48px;left:-24px;outline:none;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:48px}.mdc-slider .mdc-slider__thumb--top{z-index:1}.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob{border-style:solid;border-width:1px;box-sizing:content-box}.mdc-slider .mdc-slider__thumb-knob{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);border:10px solid;border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee);border-radius:50%;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);box-sizing:border-box;height:20px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:20px}.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob{border-color:#fff}.mdc-slider.mdc-slider--disabled .mdc-slider__thumb-knob{background-color:#000;background-color:var(--mdc-theme-on-surface,#000);border-color:#000;border-color:var(--mdc-theme-on-surface,#000)}.mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob,.mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob{border-color:#fff}.mdc-slider .mdc-slider__thumb:after,.mdc-slider .mdc-slider__thumb:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.mdc-slider .mdc-slider__thumb.mdc-ripple-surface--hover:before,.mdc-slider .mdc-slider__thumb:hover:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded--background-focused:before,.mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):focus:before{opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12);transition-duration:75ms}.mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):active:after{opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12);transition-duration:75ms}.mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-slider .mdc-slider__tick-marks{align-items:center;box-sizing:border-box;display:flex;height:100%;justify-content:space-between;padding:0 1px;position:absolute;width:100%}.mdc-slider .mdc-slider__tick-mark--active,.mdc-slider .mdc-slider__tick-mark--inactive{border-radius:50%;height:2px;width:2px}.mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--active,.mdc-slider .mdc-slider__tick-mark--active{background-color:#fff;background-color:var(--mdc-theme-on-primary,#fff);opacity:.6}.mdc-slider .mdc-slider__tick-mark--inactive{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);opacity:.6}.mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--inactive{background-color:#000;background-color:var(--mdc-theme-on-surface,#000);opacity:.6}.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{transition:transform 80ms ease}@media(prefers-reduced-motion){.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{transition:none}}.mdc-slider--disabled{cursor:auto;opacity:.38}.mdc-slider--disabled .mdc-slider__thumb,.mdc-slider__input{pointer-events:none}.mdc-slider__input{cursor:pointer;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%}