@mantine/core/styles/Slider.css

React components library focused on usability, accessibility and developer experience

.m-dd36362e{--slider-size-xs:calc(0.25rem*var(--mantine-scale));--slider-size-sm:calc(0.375rem*var(--mantine-scale));--slider-size-md:calc(0.5rem*var(--mantine-scale));--slider-size-lg:calc(0.625rem*var(--mantine-scale));--slider-size-xl:calc(0.75rem*var(--mantine-scale));--slider-size:var(--slider-size-md);--slider-radius:calc(62.5rem*var(--mantine-scale));--slider-color:var(--mantine-primary-color-filled);-webkit-tap-highlight-color:transparent;align-items:center;display:flex;flex-direction:column;height:calc(var(--slider-size)*2);outline:none;padding-left:var(--slider-size);padding-right:var(--slider-size);position:relative;touch-action:none}[data-mantine-color-scheme=light] .m-dd36362e{--slider-track-bg:var(--mantine-color-gray-2);--slider-track-disabled-bg:var(--mantine-color-gray-4)}[data-mantine-color-scheme=dark] .m-dd36362e{--slider-track-bg:var(--mantine-color-dark-4);--slider-track-disabled-bg:var(--mantine-color-dark-3)}.m-c9357328{background-color:var(--_label-bg);border-radius:var(--mantine-radius-sm);color:var(--mantine-color-white);font-size:var(--mantine-font-size-xs);padding:calc(var(--mantine-spacing-xs)/2);pointer-events:none;position:absolute;top:calc(-2.25rem*var(--mantine-scale));touch-action:none;user-select:none;white-space:nowrap}[data-mantine-color-scheme=light] .m-c9357328{--_label-bg:var(--mantine-color-gray-9)}[data-mantine-color-scheme=dark] .m-c9357328{--_label-bg:var(--mantine-color-dark-4)}.m-c9a9a60a{align-items:center;background-color:var(--_thumb-bg);border:calc(.25rem*var(--mantine-scale)) solid var(--_thumb-bd);border-radius:var(--slider-radius);box-shadow:var(--_thumb-box-shadow,none);color:var(--_thumb-bd);cursor:pointer;display:var(--_thumb-display,flex);height:var(--slider-thumb-size);justify-content:center;left:var(--slider-thumb-offset);outline-offset:calc(.125rem*var(--mantine-scale));position:absolute;top:50%;touch-action:none;transform:var(--_thumb-transform,translate(-50%,-50%));transition:box-shadow .1s ease,transform .1s ease;user-select:none;width:var(--slider-thumb-size);z-index:3}[dir=rtl] .m-c9a9a60a{left:auto;right:calc(var(--slider-thumb-offset) - var(--slider-thumb-size))}.m-c9a9a60a[data-disabled],fieldset:disabled .m-c9a9a60a{--_thumb-display:none}.m-c9a9a60a[data-dragging]{--_thumb-transform:translate(-50%,-50%) scale(1.05);--_thumb-box-shadow:var(--mantine-shadow-sm)}[data-mantine-color-scheme=light] .m-c9a9a60a{--_thumb-bd:var(--slider-color);--_thumb-bg:var(--mantine-color-white)}[data-mantine-color-scheme=dark] .m-c9a9a60a{--_thumb-bd:var(--mantine-color-white);--_thumb-bg:var(--slider-color)}.m-a8645c2{align-items:center;cursor:var(--_track-cursor,pointer);display:flex;height:calc(var(--slider-size)*2);width:100%}.m-a8645c2[data-disabled],fieldset:disabled .m-a8645c2{--_track-cursor:not-allowed}.m-c9ade57f{height:var(--slider-size);position:relative;width:100%}.m-c9ade57f[data-inverted]:not([data-disabled]){--_track-bg:var(--slider-color)}.m-c9ade57f[data-inverted][data-disabled],fieldset:disabled .m-c9ade57f[data-inverted]{--_track-bg:var(--slider-track-disabled-bg)}.m-c9ade57f:before{background-color:var(--_track-bg,var(--slider-track-bg));content:"";left:calc(var(--slider-size)*-1);right:calc(var(--slider-size)*-1);z-index:0}.m-38aeed47,.m-c9ade57f:before{border-radius:var(--slider-radius);bottom:0;position:absolute;top:0}.m-38aeed47{background-color:var(--_bar-bg,var(--slider-color));left:var(--slider-bar-offset);width:var(--slider-bar-width);z-index:1}[dir=rtl] .m-38aeed47{left:auto;right:var(--slider-bar-offset)}.m-38aeed47[data-inverted]{--_bar-bg:var(--slider-track-bg)}.m-38aeed47[data-disabled]:not([data-inverted]),fieldset:disabled .m-38aeed47:not([data-inverted]){--_bar-bg:var(--_bar-disabled-bg)}[data-mantine-color-scheme=light] .m-38aeed47{--_bar-disabled-bg:var(--mantine-color-gray-4)}[data-mantine-color-scheme=dark] .m-38aeed47{--_bar-disabled-bg:var(--mantine-color-dark-3)}.m-b7b0423a{height:0;left:calc(var(--mark-offset) - var(--slider-size)/2);pointer-events:none;position:absolute;top:0;z-index:2}[dir=rtl] .m-b7b0423a{left:unset;right:calc(var(--mark-offset) - var(--slider-size)/2)}.m-dd33bc19{background-color:var(--_mark-bg,var(--mantine-color-white));border:calc(.125rem*var(--mantine-scale)) solid var(--_mark-bd);border-radius:calc(62.5rem*var(--mantine-scale));height:var(--slider-size);pointer-events:none;transform:translateX((calc(var(--slider-size)/-2)));width:var(--slider-size)}[data-mantine-color-scheme] .m-dd33bc19[data-filled]{--_mark-bd:var(--slider-color)}[data-mantine-color-scheme=light] .m-dd33bc19[data-filled][data-disabled]{--_mark-bd:var(--mantine-color-gray-4)}[data-mantine-color-scheme=dark] .m-dd33bc19[data-filled][data-disabled]{--_mark-bd:var(--mantine-color-dark-3)}[data-mantine-color-scheme=light] .m-dd33bc19{--_mark-bd:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .m-dd33bc19{--_mark-bd:var(--mantine-color-dark-4)}.m-68c77a5b{color:var(--_mark-label-color);cursor:pointer;font-size:var(--mantine-font-size-sm);transform:translate(calc(-50% + var(--slider-size)/2),calc(var(--mantine-spacing-xs)/2));user-select:none;white-space:nowrap}[data-mantine-color-scheme=light] .m-68c77a5b{--_mark-label-color:var(--mantine-color-gray-6)}[data-mantine-color-scheme=dark] .m-68c77a5b{--_mark-label-color:var(--mantine-color-dark-2)}