@kelvininc/ui-components/dist/collection/components/range/range.css

Kelvin UI Components

/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** TODO: CODE/CONSOLE **/
@property --rotation {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotate-border {
  to {
    --rotation: 360deg;
  }
}
/**
* Design Tokens - Auto-generated by Style Dictionary
* Do not edit manually - run `pnpm tokens:build` to regenerate
*/
kv-dropdown-base:not(.hydrated) > [slot=list] {
  display: none;
}

:host {
  /**
   * @prop --range-width: Width of the range slider
   * @prop --range-height: Height of the range slider
   * @prop --range-selector-radius: Radius of the range thumb
   * @prop --range-selector-border-radius: Border radius of the range thumb
   * @prop --range-margin-top: Margin top of the range slider
   * @prop --slider-background-filled: color of the slider when its full
   * @prop --slider-background-filled-disabled: color of the slider when its disabled and full
   * @prop --slider-background-empty: color of the slider when its empty
   * @prop --thumb-background-color: thumb background color
   * @prop --thumb-border-color: thumb border color
   * @prop --range-label-color: range labels color
   * @prop --select-label-color: select labels color
   * @prop --select-label-disabled-color: disabled select labels color
  */
  --range-width: 100%;
  --range-height: 10px;
  --range-selector-radius: 20px;
  --select-label-disabled-color: var(--text-surface-neutral-tertiary);
  --slider-background-filled-disabled: var(--text-surface-neutral-tertiary);
  --slider-background-filled: var(--background-surface-brand-default);
  --slider-background-empty: var(--background-surface-neutral-strong);
  --thumb-border-color: var(--border-surface-slider-value-default);
  --range-label-color: var(--text-surface-neutral-tertiary);
  --select-label-color: var(--text-surface-neutral-primary);
}

.range-container {
  width: var(--range-width);
  margin-top: var(--range-margin-top, calc(var(--range-selector-radius) * 0.5));
  position: relative;
}
.range-container.has-label {
  margin-top: 49px;
}

.range-min-max {
  font-family: Proxima Nova;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: var(--spacing-xs);
  user-select: none;
  color: var(--range-label-color);
}

.slider {
  width: calc(var(--range-width) - 2px);
  height: var(--range-height);
  outline: none;
  margin: 0;
  border-radius: 6px;
  user-select: none;
  background: var(--slider-background-empty);
  border: 1px solid var(--slider-background-empty);
}
.slider::-webkit-slider-thumb {
  border: var(--range-selector-border-radius, calc(var(--spacing-xs) - 1px)) solid var(--thumb-border-color);
  background: var(--thumb-background-color, var(--slider-background-filled));
  height: calc(var(--range-selector-radius) + 5px);
  width: calc(var(--range-selector-radius) + 5px);
  border-radius: 50%;
  cursor: pointer;
  appearance: none;
}
.slider::-moz-range-thumb {
  border: var(--range-selector-border-radius, var(--spacing-xs)) solid var(--thumb-border-color);
  background: var(--thumb-background-color, var(--slider-background-filled));
  height: var(--range-selector-radius);
  width: var(--range-selector-radius);
  border-radius: 50%;
  cursor: pointer;
  appearance: none;
}
.slider:disabled::-webkit-slider-thumb {
  cursor: not-allowed;
  user-select: none;
  background: var(--slider-background-filled-disabled);
}

.select-value {
  font-family: Proxima Nova;
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0;
  top: -49px;
  transform: translateX(-50%);
  position: absolute;
  background-color: transparent;
  text-align: center;
  color: var(--select-label-color);
}
.select-value.disabled {
  color: var(--select-label-disabled-color);
}

input {
  appearance: none;
}