@property --ranger-position{syntax:"<number>";inherits:true;initial-value:0}.ranger{--_track-height:var(--ranger-track-height,.5rem);--_track-radius:var(--ranger-track-radius,999px);--_thumb-size:var(--ranger-thumb-size,1.25rem);--_ring-width:var(--ranger-thumb-ring-width,2px);--_gap:var(--ranger-gap,.5rem);--_font:var(--ranger-font,inherit);--_label-size:var(--ranger-label-size,.8125rem);--_label-weight:var(--ranger-label-weight,400);--_label-weight-selected:var(--ranger-label-weight-selected,600);--_icon-size:var(--ranger-icon-size,1.25rem);--_light-surface:#fff;--_light-track:#e5e5e5;--_light-thumb:#525252;--_light-thumb-border:#fff;--_light-label:#525252;--_light-label-selected:#171717;--_light-focus:#171717;--_dark-surface:#0a0a0a;--_dark-track:#262626;--_dark-thumb:#a3a3a3;--_dark-thumb-border:#0a0a0a;--_dark-label:#a3a3a3;--_dark-label-selected:#fafafa;--_dark-focus:#fafafa;--_surface:var(--ranger-surface,var(--_light-surface));--_track-color:var(--ranger-track-color,var(--_light-track));--_gradient:var(--ranger-gradient,linear-gradient(var(--ranger-gradient-direction,to right), #ffc300 0%, #ffb0fe 20%, #ff6bd6 40%, #ff9d76 60%, #51eaea 80%, #fb3569 100%));--_thumb-color:var(--ranger-thumb-color,var(--ranger-active-color,var(--_light-thumb)));--_thumb-border-color:var(--ranger-thumb-border-color,var(--_light-thumb-border));--_label-color:var(--ranger-label-color,var(--_light-label));--_label-color-selected:var(--ranger-label-color-selected,var(--_light-label-selected));--_focus-color:var(--ranger-focus-color,var(--_light-focus));--_unset-opacity:var(--ranger-unset-opacity,.55);--_disabled-opacity:var(--ranger-disabled-opacity,.45);--_transition:var(--ranger-transition,.16s ease);--_touch-target:24px;--_slice:calc(100% / var(--ranger-stop-count,1));--ranger-gradient-direction:to right;inline-size:100%;font-family:var(--_font);grid-template-columns:minmax(0,1fr);display:grid}.ranger:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){--ranger-gradient-direction:to left}.ranger[data-size=sm]{--_track-height:var(--ranger-track-height,.375rem);--_thumb-size:var(--ranger-thumb-size,1rem);--_gap:var(--ranger-gap,.375rem);--_label-size:var(--ranger-label-size,.75rem);--_icon-size:var(--ranger-icon-size,1rem)}.ranger[data-size=lg]{--_track-height:var(--ranger-track-height,.75rem);--_thumb-size:var(--ranger-thumb-size,1.5rem);--_gap:var(--ranger-gap,.75rem);--_label-size:var(--ranger-label-size,.9375rem);--_icon-size:var(--ranger-icon-size,1.5rem)}@media (prefers-color-scheme:dark){.ranger{--_surface:var(--ranger-surface,var(--_dark-surface));--_track-color:var(--ranger-track-color,var(--_dark-track));--_thumb-color:var(--ranger-thumb-color,var(--ranger-active-color,var(--_dark-thumb)));--_thumb-border-color:var(--ranger-thumb-border-color,var(--_dark-thumb-border));--_label-color:var(--ranger-label-color,var(--_dark-label));--_label-color-selected:var(--ranger-label-color-selected,var(--_dark-label-selected));--_focus-color:var(--ranger-focus-color,var(--_dark-focus))}}[data-theme=dark],[data-theme=light]{container-type:normal}[data-theme=dark]{--_theme:dark}[data-theme=light]{--_theme:light}@container style(--_theme:dark){.ranger{--_surface:var(--ranger-surface,var(--_dark-surface));--_track-color:var(--ranger-track-color,var(--_dark-track));--_thumb-color:var(--ranger-thumb-color,var(--ranger-active-color,var(--_dark-thumb)));--_thumb-border-color:var(--ranger-thumb-border-color,var(--_dark-thumb-border));--_label-color:var(--ranger-label-color,var(--_dark-label));--_label-color-selected:var(--ranger-label-color-selected,var(--_dark-label-selected));--_focus-color:var(--ranger-focus-color,var(--_dark-focus))}}@container style(--_theme:light){.ranger{--_surface:var(--ranger-surface,var(--_light-surface));--_track-color:var(--ranger-track-color,var(--_light-track));--_thumb-color:var(--ranger-thumb-color,var(--ranger-active-color,var(--_light-thumb)));--_thumb-border-color:var(--ranger-thumb-border-color,var(--_light-thumb-border));--_label-color:var(--ranger-label-color,var(--_light-label));--_label-color-selected:var(--ranger-label-color-selected,var(--_light-label-selected));--_focus-color:var(--ranger-focus-color,var(--_light-focus))}}.ranger__control{min-block-size:var(--_thumb-size);grid-row:2;align-items:center;display:grid;position:relative}.ranger__track{block-size:var(--_track-height);border-radius:var(--_track-radius);background-color:var(--_track-color);background-image:var(--_gradient);overflow:hidden}.ranger__fill{block-size:100%;inline-size:calc(var(--ranger-position,0) * 100%);transition:inline-size var(--_transition);background:0 0}.ranger__stops{margin:0;padding:0;list-style:none;position:absolute;inset-block:0;inset-inline:0}.ranger__stop{inline-size:calc(var(--_track-height) / 2);block-size:calc(var(--_track-height) / 2);background:var(--_surface);border-radius:50%;margin-block-start:calc(var(--_track-height) / -4);margin-inline-start:calc(var(--_track-height) / -4);position:absolute;inset-block-start:50%;inset-inline-start:calc(var(--_thumb-size) / 2 + var(--ranger-stop-position,0) * (100% - var(--_thumb-size)))}.ranger__thumb{box-sizing:border-box;inline-size:var(--_thumb-size);block-size:var(--_thumb-size);border:var(--_ring-width) solid var(--_thumb-border-color);background:var(--_thumb-color);transition:background-color var(--_transition), inset-inline-start var(--_transition);border-radius:50%;place-items:center;margin-inline-start:calc(var(--_thumb-size) / -2);display:grid;position:absolute;inset-inline-start:calc(var(--_thumb-size) / 2 + var(--ranger-position,0) * (100% - var(--_thumb-size)))}.ranger__control:has(.ranger__engine:focus-visible) .ranger__thumb{outline:var(--_ring-width) solid var(--_focus-color);outline-offset:var(--_ring-width);box-shadow:0 0 0 var(--_ring-width) var(--_surface)}.ranger__track,.ranger__stops,.ranger__thumb{pointer-events:none}.ranger__engine{z-index:1;opacity:0;cursor:pointer;block-size:100%;inline-size:100%;margin:0;padding:0;position:absolute;inset-block:0;inset-inline:0}.ranger__engine:disabled{cursor:default}.ranger__stop-block{justify-self:start;align-items:center;gap:calc(var(--_gap) / 2);box-sizing:border-box;inline-size:var(--_slice);min-inline-size:var(--_touch-target);min-block-size:var(--_touch-target);color:inherit;font:inherit;text-align:center;cursor:pointer;background:0 0;border:0;flex-direction:column;grid-column:1;margin-inline-start:calc(var(--_thumb-size) / 2 + var(--ranger-stop-position,0) * (100% - var(--_thumb-size)) - var(--_slice) / 2);padding:0;display:flex}.ranger__stop-block[data-side=above]{grid-row:1;align-self:end;padding-block-end:var(--_gap)}.ranger__stop-block[data-side=below]{grid-row:3;align-self:start;padding-block-start:var(--_gap)}.ranger__stop-block:disabled{cursor:default}.ranger__label{color:var(--_label-color);font-size:var(--_label-size);font-weight:var(--_label-weight);overflow-wrap:anywhere;line-height:1.25}.ranger__stop-block[data-selected] .ranger__label{color:var(--_label-color-selected);font-weight:var(--_label-weight-selected)}.ranger__icon{font-size:var(--_icon-size);line-height:1}.ranger__icon img{inline-size:auto;block-size:var(--_icon-size);object-fit:contain;max-inline-size:100%;display:block}:where(.ranger[data-dragging]) .ranger__thumb{transition:background-color var(--_transition)}:where(.ranger[data-dragging]) .ranger__fill{transition:none}.ranger[data-unset] .ranger__thumb{opacity:var(--_unset-opacity)}.ranger[data-disabled]{opacity:var(--_disabled-opacity)}.ranger[data-readonly] .ranger__engine,.ranger[data-readonly] .ranger__stop-block{cursor:default}.ranger:not([data-disabled]) .ranger__stop-block:disabled,.ranger:not([data-disabled]) .ranger__stop[data-disabled]{opacity:var(--_disabled-opacity)}.ranger__stop-block:disabled .ranger__label{text-decoration:line-through}@media (prefers-reduced-motion:reduce){.ranger,.ranger *{transition:none}}.code-block[data-v-7467707a]{border-radius:.5rem;margin-block-end:1rem;overflow:auto}.code-block[data-v-7467707a] pre{margin:0;padding:.75rem;font-size:.8125rem;line-height:1.5}.example-card[data-v-f7b4f7fe]{border-radius:.75rem;padding:1.5rem}body{margin:0;font-family:system-ui,sans-serif}main{max-inline-size:48rem;margin-inline:auto;padding-block:3rem;padding-inline:1.5rem}section{margin-block-end:2.5rem}.label-overhang-guard{padding-inline:15%}