@wonderflow/react-components/dist/components/slider/slider.module.css

UI components from Wonderflow's Wanda design system

@layer components{.Slider svg{flex-shrink:0}.Input{--track-color:var(--global-vibrancy-background);--progress-color:var(--dimmed-3);--thumb-size:24px;--progress-direction:calc(-9999px - var(--thumb-size)/2);appearance:none;background:transparent;border-radius:100px;height:var(--thumb-size);overflow:hidden;width:100%}[dir=rtl] .Input{--progress-direction:calc(9999px + var(--thumb-size)/2)}.Slider[data-slider-dimension=small] .Input{--thumb-size:16px}.Input::-webkit-slider-runnable-track{background:var(--track-color);cursor:pointer;height:var(--thumb-size);-webkit-transition:background-color .2s ease-out;transition:background-color .2s ease-out;width:100%}.Input::-moz-range-track{background:var(--track-color);cursor:pointer;height:var(--thumb-size);-moz-transition:background-color .2s ease-out;transition:background-color .2s ease-out;width:100%}.Input::-moz-focus-outer{border:0}.Input::-webkit-slider-thumb{appearance:none;background-color:var(--dimmed-7);border:0;border-radius:100%;box-shadow:var(--progress-direction) 0 0 9999px var(--progress-color);height:var(--thumb-size);outline-offset:-2px;-webkit-transition:box-shadow .1s ease-out,background-color .1s ease-out;transition:box-shadow .1s ease-out,background-color .1s ease-out;width:var(--thumb-size)}.Input::-webkit-slider-thumb:active,.Input::-webkit-slider-thumb:focus{background-color:var(--dimmed-6)}.Input::-moz-range-thumb{appearance:none;background-color:var(--dimmed-7);border:0;border-radius:100%;box-shadow:var(--progress-direction) 0 0 9999px var(--progress-color);height:var(--thumb-size);outline-offset:-2px;-moz-transition:box-shadow .1s ease-out,background-color .1s ease-out;transition:box-shadow .1s ease-out,background-color .1s ease-out;width:var(--thumb-size)}.Input::-moz-range-thumb:active,.Input::-moz-range-thumb:focus{background-color:var(--dimmed-6)}.Input:active::-webkit-slider-thumb{background-color:var(--dimmed-7);box-shadow:var(--progress-direction) 0 0 9999px var(--progress-color);cursor:grabbing}.Input:active::-moz-range-thumb{background-color:var(--dimmed-7);box-shadow:var(--progress-direction) 0 0 9999px var(--progress-color);cursor:grabbing}.Input:disabled::-webkit-slider-runnable-track{background:var(--global-disabled-background);cursor:not-allowed}.Input:disabled::-moz-range-track{background:var(--global-disabled-background);cursor:not-allowed}.Input:disabled::-webkit-slider-thumb{background:none var(--global-disabled-foreground);box-shadow:var(--progress-direction) 0 0 9999px transparent;cursor:not-allowed}.Input:disabled::-moz-range-thumb{background:none var(--global-disabled-foreground);box-shadow:var(--progress-direction) 0 0 9999px transparent;cursor:not-allowed}.Value{flex-shrink:0}.Value[aria-disabled=true]{color:var(--global-disabled-foreground);cursor:not-allowed}.CurrentValue{flex-shrink:0}[aria-disabled=true]:is(label.Label,.Icon){color:var(--global-disabled-foreground);cursor:not-allowed}}