@radix-ui/themes/src/components/slider.css

[](https://radix-ui.com/themes)

.rt-SliderRoot {
  --slider-thumb-size: calc(var(--slider-track-size) + var(--space-1));

  position: relative;
  display: flex;
  align-items: center;
  flex-grow: 1;

  border-radius: max(
    calc(var(--radius-factor) * var(--slider-track-size) / 3),
    calc(var(--radius-factor) * var(--radius-thumb))
  );

  /* ensures no selection */
  user-select: none;
  /* disable browser handling of all panning and zooming gestures on touch devices */
  touch-action: none;

  &:where([data-orientation='horizontal']) {
    width: stretch;
    height: var(--slider-track-size);
  }
  &:where([data-orientation='vertical']) {
    height: stretch;
    flex-direction: column;
    width: var(--slider-track-size);
  }
}

.rt-SliderTrack {
  overflow: hidden;
  position: relative;
  flex-grow: 1;

  border-radius: inherit;

  &:where([data-orientation='horizontal']) {
    height: var(--slider-track-size);
  }
  &:where([data-orientation='vertical']) {
    width: var(--slider-track-size);
  }
}

.rt-SliderRange {
  position: absolute;
  border-radius: inherit;

  &:where([data-orientation='horizontal']) {
    height: 100%;
  }

  &:where([data-orientation='vertical']) {
    width: 100%;
  }
}

.rt-SliderThumb {
  display: block;
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);

  /* Safari */
  outline: 0;

  &::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: calc(var(--slider-thumb-size) * 3);
    height: calc(var(--slider-thumb-size) * 3);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* Larger visible thumb so that it slightly overshoots the range */
  &::after {
    content: '';
    position: absolute;
    inset: calc(-0.25 * var(--slider-track-size));
    background-color: white;
    border-radius: max(var(--radius-1), var(--radius-thumb));
    box-shadow: var(--slider-thumb-box-shadow);
    cursor: var(--cursor-slider-thumb);
  }

  &:where(:focus-visible)::after {
    box-shadow: var(--slider-thumb-box-shadow), 0 0 0 3px var(--accent-3), 0 0 0 5px var(--focus-8);
  }

  &:where(:active) {
    cursor: var(--cursor-slider-thumb-active);
  }
}

/***************************************************************************************************
 *                                                                                                 *
 * SIZES                                                                                           *
 *                                                                                                 *
 ***************************************************************************************************/

@breakpoints {
  .rt-SliderRoot {
    &:where(.rt-r-size-1) {
      --slider-track-size: calc(var(--space-2) * 0.75);
    }
    &:where(.rt-r-size-2) {
      --slider-track-size: var(--space-2);
    }
    &:where(.rt-r-size-3) {
      --slider-track-size: calc(var(--space-2) * 1.25);
    }
  }
}

/***************************************************************************************************
 *                                                                                                 *
 * VARIANTS                                                                                        *
 *                                                                                                 *
 ***************************************************************************************************/

/* surface */

.rt-SliderRoot:where(.rt-variant-surface) {
  & :where(.rt-SliderTrack) {
    background-color: var(--gray-a3);
    box-shadow: inset 0 0 0 1px var(--gray-a5);

    &:where([data-disabled]) {
      box-shadow: inset 0 0 0 1px var(--gray-a4);
    }
  }

  & :where(.rt-SliderRange) {
    background-color: var(--accent-track);
    background-image: var(--slider-range-high-contrast-background-image);
    box-shadow: inset 0 0 0 1px var(--gray-a5);
  }

  & :where(.rt-SliderThumb) {
    --slider-thumb-box-shadow: 0 0 0 1px var(--black-a4);

    &:where([data-disabled])::after {
      background-color: var(--gray-1);
      box-shadow: 0 0 0 1px var(--gray-6);
    }
  }
}

/* classic */

.rt-SliderRoot:where(.rt-variant-classic) {
  & :where(.rt-SliderTrack) {
    background-color: var(--gray-a3);
    position: relative;

    &::before {
      content: '';
      inset: 0;
      position: absolute;
      border-radius: inherit;
      box-shadow: var(--shadow-1);
    }
    &:where([data-disabled])::before {
      opacity: 0.5;
    }
  }

  & :where(.rt-SliderRange) {
    background-color: var(--accent-track);
    background-image: var(--slider-range-high-contrast-background-image);
    box-shadow: inset 0 0 0 1px var(--gray-a3), inset 0 0 0 1px var(--accent-a4), inset 0 0 0 1px var(--black-a1),
      inset 0 1.5px 2px 0 var(--black-a2);

    &:where(.rt-high-contrast) {
      box-shadow: inset 0 0 0 1px var(--gray-a3), inset 0 0 0 1px var(--black-a2), inset 0 1.5px 2px 0 var(--black-a2);
    }
  }

  & :where(.rt-SliderThumb) {
    /* prettier-ignore */
    --slider-thumb-box-shadow:
      0 0 0 1px var(--black-a3),
      0 1px 3px var(--black-a1),
      0 2px 4px -1px var(--black-a1);

    &:where([data-disabled])::after {
      background-color: var(--gray-1);
      box-shadow: 0 0 0 1px var(--gray-6);
    }
  }
}

/* soft */

.rt-SliderRoot:where(.rt-variant-soft) {
  & :where(.rt-SliderTrack) {
    background-color: var(--gray-a4);
    /* Blend with white to increase contrast in dark mode */
    background-image: linear-gradient(var(--white-a1), var(--white-a1));

    &:where([data-disabled]) {
      background-color: var(--gray-a4);
      background-image: none;
    }
  }

  & :where(.rt-SliderRange) {
    background-image: linear-gradient(var(--accent-a5), var(--accent-a5)),
      var(--slider-range-high-contrast-background-image);
    background-color: var(--accent-6);
  }

  & :where(.rt-SliderThumb) {
    --slider-thumb-box-shadow: 0 0 0 1px var(--black-a3), 0 0 0 1px var(--gray-a2), 0 0 0 1px var(--accent-a2),
      0 1px 2px var(--gray-a4), 0 1px 3px -0.5px var(--gray-a3);

    &:where([data-disabled])::after {
      background-color: var(--gray-1);
      box-shadow: 0 0 0 1px var(--gray-5);
    }
  }
}

/* all high-contrast */

:where(.radix-themes) {
  --slider-range-high-contrast-background-image: linear-gradient(var(--black-a8), var(--black-a8));
}
:is(.dark, .dark-theme),
:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
  --slider-range-high-contrast-background-image: none;
}
.rt-SliderRoot:where(:not(.rt-high-contrast)) {
  --slider-range-high-contrast-background-image: none;
}

:where(.radix-themes) {
  --slider-disabled-blend-mode: multiply;
}
:is(.dark, .dark-theme),
:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
  --slider-disabled-blend-mode: screen;
}

/* all disabled Sliders */

[data-disabled] {
  .rt-SliderRoot:where(&) {
    cursor: var(--cursor-disabled);
    mix-blend-mode: var(--slider-disabled-blend-mode);
  }
  .rt-SliderRange:where(&) {
    background-color: transparent;
    background-image: none;
    box-shadow: none;
  }
  .rt-SliderThumb:where(&),
  .rt-SliderThumb:where(&)::after {
    cursor: var(--cursor-disabled);
  }
}