@ozen-ui/kit/__inner__/cjs/components/Slider/Slider.css

React component library

/* stylelint-disable */
.Slider {
  --slider-thumb-background-color: var(--color-background-action);
  --slider-inner-rail-background-color: var(--color-background-action);
  --slider-position: 0;
  inline-size: 100%;
}
.Slider_size_m {
      --slider-size: 12px;
    }
.Slider_size_l {
      --slider-size: 20px;
    }
.Slider_disabled {
    --slider-thumb-background-color: var(--color-content-disabled);
    --slider-inner-rail-background-color: var(--color-border-disabled);
  }
.Slider_hasMarks .Slider-Container {
      margin-block-end: var(--spacing-m);
    }
.Slider-Container {
    position: relative;
    block-size: var(--slider-size);
  }
.Slider-Input {
    inset-inline-start: calc(var(--slider-size) / 2 * -1);
    block-size: var(--slider-size);
    inline-size: calc(100% + var(--slider-size));
    margin: 0;
    opacity: 0;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    position: absolute;
    outline: none;
    cursor: pointer;
  }
.Slider-Input:hover + .Slider-Range .Slider-Thumb {
      background-color: var(--color-content-action-hover);
    }
.Slider-Input:active + .Slider-Range .Slider-Thumb {
      background-color: var(--color-content-action-pressed);
    }
.Slider-Input:focus-visible + .Slider-Range .Slider-Thumb {
      border-color: var(--color-border-focused);
    }
.Slider-Input:disabled {
      pointer-events: none;
      cursor: default;
    }
.Slider-Range {
    background-color: var(--color-border-secondary);
    border-radius: var(--border-radius-2xs);
    pointer-events: none;
    position: absolute;
    inline-size: 100%;
    inset-block-start: 50%;
    transform: translateY(-50%);
    display: block;
    block-size: 2px;
  }
.Slider-Rail {
    background-color: var(--slider-inner-rail-background-color);
    border-radius: var(--border-radius-2xs);
    inline-size: var(--slider-position);
    display: block;
    block-size: 2px;
  }
.Slider-Thumb {
    block-size: var(--slider-size);
    inline-size: var(--slider-size);
    border: var(--border-width-m) solid var(--color-background-main);
    background-color: var(--slider-thumb-background-color);
    inset-inline-start: var(--slider-position);
    box-shadow: var(--shadow-s);
    position: absolute;
    display: block;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    inset-block-start: 50%;
  }