daisyui/components/range.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.4.1 - MIT License */ @layer utilities{.range{@layer daisyui.component{&{-webkit-appearance:none;appearance:none;--range-thumb:var(--color-base-100);--range-thumb-size:calc(var(--size-selector,.25rem)*6);--range-progress:currentColor;--range-fill:1;--range-p:.25rem;--range-bg:color-mix(in oklab,currentColor 10%,#0000);cursor:pointer;vertical-align:middle;--radius-selector-max:calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));border-radius:calc(var(--radius-selector) + min(var(--range-p),var(--radius-selector-max)));width:clamp(3rem,20rem,100%);height:var(--range-thumb-size);background-color:#0000;border:none;overflow:hidden}[dir=rtl] &{--range-dir:-1}&:focus{outline:none}&:focus-visible{outline-offset:2px;outline:2px solid}&::-webkit-slider-runnable-track{background-color:var(--range-bg);border-radius:var(--radius-selector);width:100%;height:calc(var(--range-thumb-size)*.5)}@media (forced-colors:active){&::-webkit-slider-runnable-track{border:1px solid}}&::-webkit-slider-thumb{box-sizing:border-box;border-radius:calc(var(--radius-selector) + min(var(--range-p),var(--radius-selector-max)));background-color:var(--range-thumb);height:var(--range-thumb-size);width:var(--range-thumb-size);border:var(--range-p)solid;-webkit-appearance:none;appearance:none;color:var(--range-progress);box-shadow:0 -1px oklch(0% 0 0/calc(var(--depth)*.1))inset,0 8px 0 -4px oklch(100% 0 0/calc(var(--depth)*.1))inset,0 1px color-mix(in oklab,currentColor calc(var(--depth)*10%),#0000),0 0 0 2rem var(--range-thumb)inset,calc((var(--range-dir,1)*-100rem) - (var(--range-dir,1)*var(--range-thumb-size)/2))0 0 calc(100rem*var(--range-fill));position:relative;top:50%;transform:translateY(-50%)}&::-moz-range-track{background-color:var(--range-bg);border-radius:var(--radius-selector);width:100%;height:calc(var(--range-thumb-size)*.5)}@media (forced-colors:active){&::-moz-range-track{border:1px solid}}&::-moz-range-thumb{box-sizing:border-box;border-radius:calc(var(--radius-selector) + min(var(--range-p),var(--radius-selector-max)));height:var(--range-thumb-size);width:var(--range-thumb-size);border:var(--range-p)solid;color:var(--range-progress);box-shadow:0 -1px oklch(0% 0 0/calc(var(--depth)*.1))inset,0 8px 0 -4px oklch(100% 0 0/calc(var(--depth)*.1))inset,0 1px color-mix(in oklab,currentColor calc(var(--depth)*10%),#0000),0 0 0 2rem var(--range-thumb)inset,calc((var(--range-dir,1)*-100rem) - (var(--range-dir,1)*var(--range-thumb-size)/2))0 0 calc(100rem*var(--range-fill));background-color:currentColor;position:relative;top:50%}&:disabled{cursor:not-allowed;opacity:.3}}}.range-primary{@layer daisyui.modifier{&{color:var(--color-primary);--range-thumb:var(--color-primary-content)}}}.range-secondary{@layer daisyui.modifier{&{color:var(--color-secondary);--range-thumb:var(--color-secondary-content)}}}.range-accent{@layer daisyui.modifier{&{color:var(--color-accent);--range-thumb:var(--color-accent-content)}}}.range-neutral{@layer daisyui.modifier{&{color:var(--color-neutral);--range-thumb:var(--color-neutral-content)}}}.range-success{@layer daisyui.modifier{&{color:var(--color-success);--range-thumb:var(--color-success-content)}}}.range-warning{@layer daisyui.modifier{&{color:var(--color-warning);--range-thumb:var(--color-warning-content)}}}.range-info{@layer daisyui.modifier{&{color:var(--color-info);--range-thumb:var(--color-info-content)}}}.range-error{@layer daisyui.modifier{&{color:var(--color-error);--range-thumb:var(--color-error-content)}}}.range-xs{@layer daisyui.modifier{&{--range-thumb-size:calc(var(--size-selector,.25rem)*4)}}}.range-sm{@layer daisyui.modifier{&{--range-thumb-size:calc(var(--size-selector,.25rem)*5)}}}.range-md{@layer daisyui.modifier{&{--range-thumb-size:calc(var(--size-selector,.25rem)*6)}}}.range-lg{@layer daisyui.modifier{&{--range-thumb-size:calc(var(--size-selector,.25rem)*7)}}}.range-xl{@layer daisyui.modifier{&{--range-thumb-size:calc(var(--size-selector,.25rem)*8)}}}@media (width>=640px){.sm\:range{@layer daisyui.component{&{-webkit-appearance:none;appearance:none;--range-thumb:var(--color-base-100);--range-thumb-size:calc(var(--size-selector,.25rem)*6);--range-progress:currentColor;--range-fill:1;--range-p:.25rem;--range-bg:color-mix(in oklab,currentColor 10%,#0000);cursor:pointer;vertical-align:middle;--radius-selector-max:calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));border-radius:calc(var(--radius-selector) + min(var(--range-p),var(--radius-selector-max)));width:clamp(3rem,20rem,100%);height:var(--range-thumb-size);background-color:#0000;border:none;overflow:hidden}[dir=rtl] &{--range-dir:-1}&:focus{outline:none}&:focus-visible{outline-offset:2px;outline:2px solid}&::-webkit-slider-runnable-track{background-color:var(--range-bg);border-radius:var(--radius-selector);width:100%;height:calc(var(--range-thumb-size)*.5)}@media (forced-colors:active){&::-webkit-slider-runnable-track{border:1px solid}}&::-webkit-slider-thumb{box-sizing:border-box;border-radius:calc(var(--radius-selector) + min(var(--range-p),var(--radius-selector-max)));background-color:var(--range-thumb);height:var(--range-thumb-size);width:var(--range-thumb-size);border:var(--range-p)solid;-webkit-appearance:none;appearance:none;color:var(--range-progress);box-shadow:0 -1px oklch(0% 0 0/calc(var(--depth)*.1))inset,0 8px 0 -4px oklch(100% 0 0/calc(var(--depth)*.1))inset,0 1px color-mix(in oklab,currentColor calc(var(--depth)*10%),#0000),0 0 0 2rem var(--range-thumb)inset,calc((var(--range-dir,1)*-100rem) - (var(--range-dir,1)*var(--range-thumb-size)/2))0 0 calc(100rem*var(--range-fill));position:relative;top:50%;transform:translateY(-50%)}&::-moz-range-track{background-color:var(--range-bg);border-radius:var(--radius-selector);width:100%;height:calc(var(--range-thumb-size)*.5)}@media (forced-colors:active){&::-moz-range-track{border:1px solid}}&::-moz-range-thumb{box-sizing:border-box;border-radius:calc(var(--radius-selector) + min(var(--range-p),var(--radius-selector-max)));height:var(--range-thumb-size);width:var(--range-thumb-size);border:var(--range-p)solid;color:var(--range-progress);box-shadow:0 -1px oklch(0% 0 0/calc(var(--depth)*.1))inset,0 8px 0 -4px oklch(100% 0 0/calc(var(--depth)*.1))inset,0 1px color-mix(in oklab,currentColor calc(var(--depth)*10%),#0000),0 0 0 2rem var(--range-thumb)inset,calc((var(--range-dir,1)*-100rem) - (var(--range-dir,1)*var(--range-thumb-size)/2))0 0 calc(100rem*var(--range-fill));background-color:currentColor;position:relative;top:50%}&:disabled{cursor:not-allowed;opacity:.3}}}.sm\:range-primary{@layer daisyui.modifier{&{color:var(--color-primary);--range-thumb:var(--color-primary-content)}}}.sm\:range-secondary{@layer daisyui.modifier{&{color:var(--color-secondary);--range-thumb:var(--color-secondary-content)}}}.sm\:range-accent{@layer daisyui.modifier{&{color:var(--color-accent);--range-thumb:var(--color-accent-content)}}}.sm\:range-neutral{@layer daisyui.modifier{&{color:var(--color-neutral);--range-thumb:var(--color-neutral-content)}}}.sm\:range-success{@layer daisyui.modifier{&{color:var(--color-success);--range-thumb:var(--color-success-content)}}}.sm\:range-warning{@layer daisyui.modifier{&{color:var(--color-warning);--range-thumb:var(--color-warning-content)}}}.sm\:range-info{@layer daisyui.modifier{&{color:var(--color-info);--range-thumb:var(--color-info-content)}}}.sm\:range-error{@layer daisyui.modifier{&{color:var(--color-error);--range-thumb:var(--color-error-content)}}}.sm\:range-xs{@layer daisyui.modifier{&{--range-thumb-size:calc(var(--size-selector,.25rem)*4)}}}.sm\:range-sm{@layer daisyui.modifier{&{--range-thumb-size:calc(var(--size-selector,.25rem)*5)}}}.sm\:range-md{@layer daisyui.modifier{&{--range-thumb-size:calc(var(--size-selector,.25rem)*6)}}}.sm\:range-lg{@layer daisyui.modifier{&{--range-thumb-size:calc(var(--size-selector,.25rem)*7)}}}.sm\:range-xl{@layer daisyui.modifier{&{--range-thumb-size:calc(var(--size-selector,.25rem)*8)}}}}@media (width>=768px){.md\:range{@layer daisyui.component{&{-webkit-appearance:none;appearance:none;--range-thumb:var(--color-base-100);--range-thumb-size:calc(var(--size-selector,.25rem)*6);--range-progress:currentColor;--range-fill:1;--range-p:.25rem;--range-bg:color-mix(in oklab,currentColor 10%,#0000);cursor:pointer;vertical-align:middle;--radius-selector-max:calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));border-radius:calc(var(--radius-selector) + min(var(--range-p),var(--radius-selector-max)));width:clamp(3rem,20rem,100%);height:var(--range-thumb-size);background-color:#0000;border:none;overflow:hidden}[dir=rtl] &{--range-dir:-1}&:focus{outline:none}&:focus-visible{outline-offset:2px;outline:2px solid}&::-webkit-slider-runnable-track{background-color:var(--range-bg);border-radius:var(--radius-selector);width:100%;height:calc(var(--range-thumb-size)*.5)}@media (forced-colors:active){&::-webkit-slider-runnable-track{border:1px solid}}&::-webkit-slider-thumb{box-sizing:border-box;border-radius:calc(var(--radius-selector) + min(var(--range-p),var(--radius-selector-max)));background-color:var(--range-thumb);height:var(--range-thumb-size);width:var(--range-thumb-size);border:var(--range-p)solid;-webkit-appearance:none;appearance:none;color:var(--range-progress);box-shadow:0 -1px oklch(0% 0 0/calc(var(--depth)*.1))inset,0 8px 0 -4px oklch(100% 0 0/calc(var(--depth)*.1))inset,0 1px color-mix(in oklab,currentColor calc(var(--depth)*10%),#0000),0 0 0 2rem var(--range-thumb)inset,calc((var(--range-dir,1)*-100rem) - (var(--range-dir,1)*var(--range-thumb-size)/2))0 0 calc(100rem*var(--range-fill));position:relative;top:50%;transform:translateY(-50%)}&::-moz-range-track{background-color:var(--range-bg);border-radius:var(--radius-selector);width:100%;height:calc(var(--range-thumb-size)*.5)}@media (forced-colors:active){&::-moz-range-track{border:1px solid}}&::-moz-range-thumb{box-sizing:border-box;border-radius:calc(var(--radius-selector) + min(var(--range-p),var(--radius-selector-max)));height:var(--range-thumb-size);width:var(--range-thumb-size);border:var(--range-p)solid;color:var(--range-progress);box-shadow:0 -1px oklch(0% 0 0/calc(var(--depth)*.1))inset,0 8px 0 -4px oklch(100% 0 0/calc(var(--depth)*.1))inset,0 1px color-mix(in oklab,currentColor calc(var(--depth)*10%),#0000),0 0 0 2rem var(--range-thumb)inset,calc((var(--range-dir,1)*-100rem) - (var(--range-dir,1)*var(--range-thumb-size)/2))0 0 calc(100rem*var(--range-fill));background-color:currentColor;position:relative;top:50%}&:disabled{cursor:not-allowed;opacity:.3}}}.md\:range-primary{@layer daisyui.modifier{&{color:var(--color-primary);--range-thumb:var(--color-primary-content)}}}.md\:range-secondary{@layer daisyui.modifier{&{color:var(--color-secondary);--range-thumb:var(--color-secondary-content)}}}.md\:range-accent{@layer daisyui.modifier{&{color:var(--color-accent);--range-thumb:var(--color-accent-content)}}}.md\:range-neutral{@layer daisyui.modifier{&{color:var(--color-neutral);--range-thumb:var(--color-neutral-content)}}}.md\:range-success{@layer daisyui.modifier{&{color:var(--color-success);--range-thumb:var(--color-success-content)}}}.md\:range-warning{@layer daisyui.modifier{&{color:var(--color-warning);--range-thumb:var(--color-warning-content)}}}.md\:range-info{@layer daisyui.modifier{&{color:var(--color-info);--range-thumb:var(--color-info-content)}}}.md\:range-error{@layer daisyui.modifier{&{color:var(--color-error);--range-thumb:var(--color-error-content)}}}.md\:range-xs{@layer daisyui.modifier{&{--range-thumb-size:calc(var(--size-selector,.25rem)*4)}}}.md\:range-sm{@layer daisyui.modifier{&{--range-thumb-size:calc(var(--size-selector,.25rem)*5)}}}.md\:range-md{@layer daisyui.modifier{&{--range-thumb-size:calc(var(--size-selector,.25rem)*6)}}}.md\:range-lg{@layer daisyui.modifier{&{--range-thumb-size:calc(var(--size-selector,.25rem)*7)}}}.md\:range-xl{@layer daisyui.modifier{&{--range-thumb-size:calc(var(--size-selector,.25rem)*8)}}}}@media (width>=1024px){.lg\:range{@layer daisyui.component{&{-webkit-appearance:none;appearance:none;--range-thumb:var(--color-base-100);--range-thumb-size:calc(var(--size-selector,.25rem)*6);--range-progress:currentColor;--range-fill:1;--range-p:.25rem;--range-bg:color-mix(in oklab,currentColor 10%,#0000);cursor:pointer;vertical-align:middle;--radius-selector-max:calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));border-radius:calc(var(--radius-selector) + min(var(--range-p),var(--radius-selector-max)));width:clamp(3rem,20rem,100%);height:var(--range-thumb-size);background-color:#0000;border:none;overflow:hidden}[dir=rtl] &{--range-dir:-1}&:focus{outline:none}&:focus-visible{outline-offset:2px;outline:2px solid}&::-webkit-slider-runnable-track{background-color:var(--range-bg);border-radius:var(--radius-selector);width:100%;height:calc(var(--range-thumb-size)*.5)}@media (forced-colors:active){&::-webkit-slider-runnable-track{border:1px solid}}&::-webkit-slider-thumb{box-sizing:border-box;border-radius:calc(var(--radius-selector) + min(var(--range-p),var(--radius-selector-max)));background-color:var(--range-thumb);height:var(--range-thumb-size);width:var(--range-thumb-size);border:var(--range-p)solid;-webkit-appearance:none;appearance:none;color:var(--range-progress);box-shadow:0 -1px oklch(0% 0 0/calc(var(--depth)*.1))inset,0 8px 0 -4px oklch(100% 0 0/calc(var(--depth)*.1))inset,0 1px color-mix(in oklab,currentColor calc(var(--depth)*10%),#0000),0 0 0 2rem var(--range-thumb)inset,calc((var(--range-dir,1)*-100rem) - (var(--range-dir,1)*var(--range-thumb-size)/2))0 0 calc(100rem*var(--range-fill));position:relative;top:50%;transform:translateY(-50%)}&::-moz-range-track{background-color:var(--range-bg);border-radius:var(--radius-selector);width:100%;height:calc(var(--range-thumb-size)*.5)}@media (forced-colors:active){&::-moz-range-track{border:1px solid}}&::-moz-range-thumb{box-sizing:border-box;border-radius:calc(var(--radius-selector) + min(var(--range-p),var(--radius-selector-max)));height:var(--range-thumb-size);width:var(--range-thumb-size);border:var(--range-p)solid;color:var(--range-progress);box-shadow:0 -1px oklch(0% 0 0/calc(var(--depth)*.1))inset,0 8px 0 -4px oklch(100% 0 0/calc(var(--depth)*.1))inset,0 1px color-mix(in oklab,currentColor calc(var(--depth)*10%),#0000),0 0 0 2rem var(--range-thumb)inset,calc((var(--range-dir,1)*-100rem) - (var(--range-dir,1)*var(--range-thumb-size)/2))0 0 calc(100rem*var(--range-fill));background-color:currentColor;position:relative;top:50%}&:disabled{cursor:not-allowed;opacity:.3}}}.lg\:range-primary{@layer daisyui.modifier{&{color:var(--color-primary);--range-thumb:var(--color-primary-content)}}}.lg\:range-secondary{@layer daisyui.modifier{&{color:var(--color-secondary);--range-thumb:var(--color-secondary-content)}}}.lg\:range-accent{@layer daisyui.modifier{&{color:var(--color-accent);--range-thumb:var(--color-accent-content)}}}.lg\:range-neutral{@layer daisyui.modifier{&{color:var(--color-neutral);--range-thumb:var(--color-neutral-content)}}}.lg\:range-success{@layer daisyui.modifier{&{color:var(--color-success);--range-thumb:var(--color-success-content)}}}.lg\:range-warning{@layer daisyui.modifier{&{color:var(--color-warning);--range-thumb:var(--color-warning-content)}}}.lg\:range-info{@layer daisyui.modifier{&{color:var(--color-info);--range-thumb:var(--color-info-content)}}}.lg\:range-error{@layer daisyui.modifier{&{color:var(--color-error);--range-thumb:var(--color-error-content)}}}.lg\:range-xs{@layer daisyui.modifier{&{--range-thumb-size:calc(var(--size-selector,.25rem)*4)}}}.lg\:range-sm{@layer daisyui.modifier{&{--range-thumb-size:calc(var(--size-selector,.25rem)*5)}}}.lg\:range-md{@layer daisyui.modifier{&{--range-thumb-size:calc(var(--size-selector,.25rem)*6)}}}.lg\:range-lg{@layer daisyui.modifier{&{--range-thumb-size:calc(var(--size-selector,.25rem)*7)}}}.lg\:range-xl{@layer daisyui.modifier{&{--range-thumb-size:calc(var(--size-selector,.25rem)*8)}}}}@media (width>=1280px){.xl\:range{@layer daisyui.component{&{-webkit-appearance:none;appearance:none;--range-thumb:var(--color-base-100);--range-thumb-size:calc(var(--size-selector,.25rem)*6);--range-progress:currentColor;--range-fill:1;--range-p:.25rem;--range-bg:color-mix(in oklab,currentColor 10%,#0000);cursor:pointer;vertical-align:middle;--radius-selector-max:calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));border-radius:calc(var(--radius-selector) + min(var(--range-p),var(--radius-selector-max)));width:clamp(3rem,20rem,100%);height:var(--range-thumb-size);background-color:#0000;border:none;overflow:hidden}[dir=rtl] &{--range-dir:-1}&:focus{outline:none}&:focus-visible{outline-offset:2px;outline:2px solid}&::-webkit-slider-runnable-track{background-color:var(--range-bg);border-radius:var(--radius-selector);width:100%;height:calc(var(--range-thumb-size)*.5)}@media (forced-colors:active){&::-webkit-slider-runnable-track{border:1px solid}}&::-webkit-slider-thumb{box-sizing:border-box;border-radius:calc(var(--radius-selector) + min(var(--range-p),var(--radius-selector-max)));background-color:var(--range-thumb);height:var(--range-thumb-size);width:var(--range-thumb-size);border:var(--range-p)solid;-webkit-appearance:none;appearance:none;color:var(--range-progress);box-shadow:0 -1px oklch(0% 0 0/calc(var(--depth)*.1))inset,0 8px 0 -4px oklch(100% 0 0/calc(var(--depth)*.1))inset,0 1px color-mix(in oklab,currentColor calc(var(--depth)*10%),#0000),0 0 0 2rem var(--range-thumb)inset,calc((var(--range-dir,1)*-100rem) - (var(--range-dir,1)*var(--range-thumb-size)/2))0 0 calc(100rem*var(--range-fill));position:relative;top:50%;transform:translateY(-50%)}&::-moz-range-track{background-color:var(--range-bg);border-radius:var(--radius-selector);width:100%;height:calc(var(--range-thumb-size)*.5)}@media (forced-colors:active){&::-moz-range-track{border:1px solid}}&::-moz-range-thumb{box-sizing:border-box;border-radius:calc(var(--radius-selector) + min(var(--range-p),var(--radius-selector-max)));height:var(--range-thumb-size);width:var(--range-thumb-size);border:var(--range-p)solid;color:var(--range-progress);box-shadow:0 -1px oklch(0% 0 0/calc(var(--depth)*.1))inset,0 8px 0 -4px oklch(100% 0 0/calc(var(--depth)*.1))inset,0 1px color-mix(in oklab,currentColor calc(var(--depth)*10%),#0000),0 0 0 2rem var(--range-thumb)inset,calc((var(--range-dir,1)*-100rem) - (var(--range-dir,1)*var(--range-thumb-size)/2))0 0 calc(100rem*var(--range-fill));background-color:currentColor;position:relative;top:50%}&:disabled{cursor:not-allowed;opacity:.3}}}.xl\:range-primary{@layer daisyui.modifier{&{color:var(--color-primary);--range-thumb:var(--color-primary-content)}}}.xl\:range-secondary{@layer daisyui.modifier{&{color:var(--color-secondary);--range-thumb:var(--color-secondary-content)}}}.xl\:range-accent{@layer daisyui.modifier{&{color:var(--color-accent);--range-thumb:var(--color-accent-content)}}}.xl\:range-neutral{@layer daisyui.modifier{&{color:var(--color-neutral);--range-thumb:var(--color-neutral-content)}}}.xl\:range-success{@layer daisyui.modifier{&{color:var(--color-success);--range-thumb:var(--color-success-content)}}}.xl\:range-warning{@layer daisyui.modifier{&{color:var(--color-warning);--range-thumb:var(--color-warning-content)}}}.xl\:range-info{@layer daisyui.modifier{&{color:var(--color-info);--range-thumb:var(--color-info-content)}}}.xl\:range-error{@layer daisyui.modifier{&{color:var(--color-error);--range-thumb:var(--color-error-content)}}}.xl\:range-xs{@layer daisyui.modifier{&{--range-thumb-size:calc(var(--size-selector,.25rem)*4)}}}.xl\:range-sm{@layer daisyui.modifier{&{--range-thumb-size:calc(var(--size-selector,.25rem)*5)}}}.xl\:range-md{@layer daisyui.modifier{&{--range-thumb-size:calc(var(--size-selector,.25rem)*6)}}}.xl\:range-lg{@layer daisyui.modifier{&{--range-thumb-size:calc(var(--size-selector,.25rem)*7)}}}.xl\:range-xl{@layer daisyui.modifier{&{--range-thumb-size:calc(var(--size-selector,.25rem)*8)}}}}@media (width>=1536px){.\32 xl\:range{@layer daisyui.component{&{-webkit-appearance:none;appearance:none;--range-thumb:var(--color-base-100);--range-thumb-size:calc(var(--size-selector,.25rem)*6);--range-progress:currentColor;--range-fill:1;--range-p:.25rem;--range-bg:color-mix(in oklab,currentColor 10%,#0000);cursor:pointer;vertical-align:middle;--radius-selector-max:calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));border-radius:calc(var(--radius-selector) + min(var(--range-p),var(--radius-selector-max)));width:clamp(3rem,20rem,100%);height:var(--range-thumb-size);background-color:#0000;border:none;overflow:hidden}[dir=rtl] &{--range-dir:-1}&:focus{outline:none}&:focus-visible{outline-offset:2px;outline:2px solid}&::-webkit-slider-runnable-track{background-color:var(--range-bg);border-radius:var(--radius-selector);width:100%;height:calc(var(--range-thumb-size)*.5)}@media (forced-colors:active){&::-webkit-slider-runnable-track{border:1px solid}}&::-webkit-slider-thumb{box-sizing:border-box;border-radius:calc(var(--radius-selector) + min(var(--range-p),var(--radius-selector-max)));background-color:var(--range-thumb);height:var(--range-thumb-size);width:var(--range-thumb-size);border:var(--range-p)solid;-webkit-appearance:none;appearance:none;color:var(--range-progress);box-shadow:0 -1px oklch(0% 0 0/calc(var(--depth)*.1))inset,0 8px 0 -4px oklch(100% 0 0/calc(var(--depth)*.1))inset,0 1px color-mix(in oklab,currentColor calc(var(--depth)*10%),#0000),0 0 0 2rem var(--range-thumb)inset,calc((var(--range-dir,1)*-100rem) - (var(--range-dir,1)*var(--range-thumb-size)/2))0 0 calc(100rem*var(--range-fill));position:relative;top:50%;transform:translateY(-50%)}&::-moz-range-track{background-color:var(--range-bg);border-radius:var(--radius-selector);width:100%;height:calc(var(--range-thumb-size)*.5)}@media (forced-colors:active){&::-moz-range-track{border:1px solid}}&::-moz-range-thumb{box-sizing:border-box;border-radius:calc(var(--radius-selector) + min(var(--range-p),var(--radius-selector-max)));height:var(--range-thumb-size);width:var(--range-thumb-size);border:var(--range-p)solid;color:var(--range-progress);box-shadow:0 -1px oklch(0% 0 0/calc(var(--depth)*.1))inset,0 8px 0 -4px oklch(100% 0 0/calc(var(--depth)*.1))inset,0 1px color-mix(in oklab,currentColor calc(var(--depth)*10%),#0000),0 0 0 2rem var(--range-thumb)inset,calc((var(--range-dir,1)*-100rem) - (var(--range-dir,1)*var(--range-thumb-size)/2))0 0 calc(100rem*var(--range-fill));background-color:currentColor;position:relative;top:50%}&:disabled{cursor:not-allowed;opacity:.3}}}.\32 xl\:range-primary{@layer daisyui.modifier{&{color:var(--color-primary);--range-thumb:var(--color-primary-content)}}}.\32 xl\:range-secondary{@layer daisyui.modifier{&{color:var(--color-secondary);--range-thumb:var(--color-secondary-content)}}}.\32 xl\:range-accent{@layer daisyui.modifier{&{color:var(--color-accent);--range-thumb:var(--color-accent-content)}}}.\32 xl\:range-neutral{@layer daisyui.modifier{&{color:var(--color-neutral);--range-thumb:var(--color-neutral-content)}}}.\32 xl\:range-success{@layer daisyui.modifier{&{color:var(--color-success);--range-thumb:var(--color-success-content)}}}.\32 xl\:range-warning{@layer daisyui.modifier{&{color:var(--color-warning);--range-thumb:var(--color-warning-content)}}}.\32 xl\:range-info{@layer daisyui.modifier{&{color:var(--color-info);--range-thumb:var(--color-info-content)}}}.\32 xl\:range-error{@layer daisyui.modifier{&{color:var(--color-error);--range-thumb:var(--color-error-content)}}}.\32 xl\:range-xs{@layer daisyui.modifier{&{--range-thumb-size:calc(var(--size-selector,.25rem)*4)}}}.\32 xl\:range-sm{@layer daisyui.modifier{&{--range-thumb-size:calc(var(--size-selector,.25rem)*5)}}}.\32 xl\:range-md{@layer daisyui.modifier{&{--range-thumb-size:calc(var(--size-selector,.25rem)*6)}}}.\32 xl\:range-lg{@layer daisyui.modifier{&{--range-thumb-size:calc(var(--size-selector,.25rem)*7)}}}.\32 xl\:range-xl{@layer daisyui.modifier{&{--range-thumb-size:calc(var(--size-selector,.25rem)*8)}}}}}