welcome-ui/dist/Slider.css

Customizable design system with react, typescript, tailwindcss and ariakit.

@layer components{._slider-root_4d202_2{display:flex;flex-direction:column;position:relative;width:100%}._range-root_4d202_8{width:100%;display:flex;flex-direction:column;position:relative}._input-wrapper_4d202_14{align-items:center;display:flex;gap:var(--spacing-sm);--inputTextWrapperWidth: 72px}._hint_4d202_20{margin-top:0}._slider-wrapper_4d202_23{display:flex;flex-direction:column;flex-grow:1;height:1.25rem;position:relative}._range-wrapper_4d202_30{position:relative;flex-grow:1}._tick-markers_4d202_34{height:24px;margin-left:10px;margin-right:10px;margin-top:5px;position:relative}._input-range-wrapper_4d202_41{height:1.25rem;padding-bottom:var(--spacing-sm);position:relative;padding-top:var(--spacing-sm);width:100%;--inputTextWrapperWidth: 72px}._input-range_4d202_41{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:var(--spacing-xs);margin:auto 0}._input-range_4d202_41::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-neutral-90);border:var(--border-width-md) solid var(--color-neutral-10);border-radius:50%;cursor:pointer;height:1.25rem;width:1.25rem;transform:scale(1);border:var(--border-width-md) solid var(--borderColor, var(--color-neutral-10));transition:background-color var(--duration-medium),border-color var(--duration-medium),transform .1s ease-in-out}._input-range_4d202_41::-moz-range-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-neutral-90);border:var(--border-width-md) solid var(--color-neutral-10);border-radius:50%;cursor:pointer;height:1.25rem;width:1.25rem;transform:scale(1);border:var(--border-width-md) solid var(--borderColor, var(--color-neutral-10));transition:background-color var(--duration-medium),border-color var(--duration-medium),transform .1s ease-in-out}._input-range_4d202_41:active,._input-range_4d202_41:focus-visible{outline:none}._input-range_4d202_41:active::-webkit-slider-thumb,._input-range_4d202_41:focus-visible::-webkit-slider-thumb{transform:scale(1.2);outline:var(--border-width-md) solid var(--color-yellow-40)}._input-range_4d202_41:active::-moz-range-thumb,._input-range_4d202_41:focus-visible::-moz-range-thumb{transform:scale(1.2);outline:var(--border-width-md) solid var(--color-yellow-40)}._input-range_4d202_41:disabled{background-image:linear-gradient(var(--color-beige-60),var(--color-beige-60));cursor:not-allowed}._input-range_4d202_41:disabled::-webkit-slider-thumb{background-color:var(--color-beige-60);cursor:not-allowed}._input-range_4d202_41:disabled::-moz-range-thumb{background-color:var(--color-beige-60);cursor:not-allowed}._input-range_4d202_41:disabled:active::-webkit-slider-thumb{transform:none;outline:none}._input-range_4d202_41:disabled:active::-moz-range-thumb{transform:none;outline:none}._border-selector-secondary-blue_4d202_110{--borderColor: var(--color-secondary-blue)}._border-selector-secondary-green_4d202_113{--borderColor: var(--color-secondary-green)}._border-selector-secondary-orange_4d202_116{--borderColor: var(--color-secondary-orange)}._border-selector-secondary-pink_4d202_119{--borderColor: var(--color-secondary-pink)}._border-selector-secondary-teal_4d202_122{--borderColor: var(--color-secondary-teal)}._border-selector-secondary-violet_4d202_125{--borderColor: var(--color-secondary-violet)}._slider-input-range_4d202_128{background-color:var(--color-beige-40);background-image:linear-gradient(var(--color-yellow-40),var(--color-yellow-40));cursor:pointer;background-repeat:no-repeat;border-radius:0}._range-input-range_4d202_135{pointer-events:none;position:absolute;outline:none;z-index:1}._range-input-range_4d202_135::-webkit-slider-thumb{pointer-events:all;position:relative}._range-input-range_4d202_135::-moz-range-thumb{pointer-events:all;position:relative}._output_4d202_149{opacity:0;visibility:hidden;transition:opacity .15s ease-in-out,visibility .15s ease-in-out,transform .15s ease-in-out;position:absolute;text-align:center;transform:translate(-50%,calc(-100% + -var(--spacing-xs)))}._output-visible_4d202_157{opacity:100;visibility:visible;transform:translate(-50%,calc(-100% + -var(--spacing-sm)))}._tooltip_4d202_162{background-color:var(--color-neutral-90);border:var(--border-width-sm) solid var(--color-neutral-70);color:var(--color-neutral-10);flex:1 1 auto;margin:auto;min-width:var(--spacing-xxs);padding:var(--spacing-xs) var(--spacing-sm)}._thick_4d202_171{position:absolute;flex-direction:column}._thick_4d202_171:before{content:"";position:absolute;background-color:var(--color-neutral-30);height:6px;width:1px}._thick-label_4d202_182{position:absolute;top:0;transform:translate(-50%,50%);white-space:nowrap}._range-track_4d202_188{position:absolute;width:100%;height:var(--spacing-xs);background-color:var(--color-beige-40)}._range_4d202_8{position:absolute;width:100%;height:var(--spacing-xs);background-color:var(--color-yellow-40)}._range-disabled_4d202_200{background-image:linear-gradient(var(--color-beige-60),var(--color-beige-60));cursor:not-allowed}}