@heycar-uikit/core/slider/styles/default.css

The React UI library from HeyCar

:root {
  /* heycar mint color */

  /* mica blue color */
  --color-mica-blue-50: #f1f4fa;
  --color-mica-blue-200: #a2b7da;
  --color-mica-blue-700: #052962;

  /* sunbeam blue color */

  /* mustang yellow color */

  /* old ferrari red color */

  /* -- fantasy name of "green" color to be defined -- */

  /* -- fantasy name of "whatsapp" color to be defined -- */

  /* -- fantasy name of "red" color to be defined -- */

  /* tarmac grey color */
  --color-tarmac-grey-700: #303030;

  /* brand colors */
}
/* Depricated. Do Not Use */
:root {
  --spacing-1: 4px;
}
:root {
  /* Font families */

  /* Font weights */
}
/*
  Heading
*/
/*
  Sub-Heading
*/
/*
  Body
*/
/*
  Caption
*/
/*
  Overline
*/
/*
  Button
*/
/*
  Button Old - DO NOT USE
*/
/* If this is ever changed please update breakpoints.json as well */
/* Mobile */
/* Tablet */
/* Desktop */
/* Default theme (light) */
:root {
  /*
    Colors
  */
  --color-primary-50: var(--color-mica-blue-50);
  --color-primary-200: var(--color-mica-blue-200);
  --color-primary-700: var(--color-mica-blue-700);
  --color-neutral-700: var(--color-tarmac-grey-700);

  /*
    Sizes
  */
}
body {
  color: var(--color-neutral-700);
}
:root {
  --slider-thumb-size: 22px;
  --slider-halo-size: 40px;
  --slider-focus-visible: calc(var(--slider-thumb-size) * 1.1818181818181819);
  --slider-thumb-left-offset: -2px;
}
.slider__sliderWrapper_9todc .slider__heycarSlider_9todc {
    height: var(--slider-thumb-size);
    display: flex;
    align-items: center;
  }
.slider__sliderWrapper_9todc .range-slider__track {
    top: 10px;
    height: var(--spacing-1);
    background-color: var(--color-primary-200);

    /* section of track in between the 2 thumbs */
  }
.slider__sliderWrapper_9todc .range-slider__thumb {
    width: var(--slider-thumb-size);
    height: var(--slider-thumb-size);
    border: solid 1px var(--color-primary-700);
    border-radius: 50%;
    background: #fff;
    transform: scale(1);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    -webkit-user-select: none;
            user-select: none;
    outline: none;
    cursor: grab;
  }
.slider__sliderWrapper_9todc .range-slider__thumb:focus-visible {
      width: var(--slider-focus-visible);
      height: var(--slider-focus-visible);
      margin-left: var(--slider-thumb-left-offset);
      outline: none;
    }
.slider__sliderWrapper_9todc .range-slider__thumb .tooltip {
      -webkit-user-select: none;
              user-select: none;
      position: absolute;
      bottom: 30px;
      opacity: 0;
      transform: scale(0.6) translateY(50%);
      pointer-events: none;
      transition: all 0.3s cubic-bezier(0.6, -0.28, 0.18, 0.94);
      padding: var(--spacing-1);
      background-color: var(--color-primary-50);
      color: var(--color-neutral-700);
      white-space: nowrap;
    }
/* Size booster for mobile usability */
.slider__sliderWrapper_9todc .range-slider__thumb:before {
      content: '';
      width: var(--slider-halo-size);
      height: var(--slider-halo-size);
      position: absolute;
      border-radius: 50%;
      margin-top: -6px;
    }
.slider__sliderWrapper_9todc .dragging {
    cursor: grabbing;
    margin-left: var(--slider-thumb-left-offset);
    width: var(--slider-focus-visible);
    height: var(--slider-focus-visible);
  }
.slider__sliderWrapper_9todc .dragging .tooltip {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
.slider__sliderWrapper_9todc.slider__isWithHistogram_9todc .range-slider__track {
      height: 2px;
    }