@spaced-out/ui-design-system/lib/components/RangeSlider/RangeSlider.module.css

Sense UI components library

@value (colorFillPrimary, colorGrayLightest, colorBackgroundTertiary, colorFocusPrimary, colorTextDisabled) from '../../styles/variables/_color.css';
@value (sizeFluid, size4, size20, size2, size34) from '../../styles/variables/_size.css';
@value (spaceXXSmall, spaceNone) from '../../styles/variables/_space.css';
@value (borderRadiusLarge, borderRadiusCircle, borderWidthTertiary, borderWidthNone) from '../../styles/variables/_border.css';

@value thumbSize: size20;
@value tickSize: size2;

.wrapper {
  display: flex;
  align-items: center;
  width: sizeFluid;
  gap: spaceXXSmall;
}

.sliderContainer {
  display: flex;
  flex-flow: column;
  align-items: center;
  position: relative;
  width: sizeFluid;
}

.slider {
  display: flex;
  align-items: center;
  -webkit-appearance: none;
  appearance: none;
  width: sizeFluid;
  height: size4;
  background-color: colorGrayLightest;
  border-radius: borderRadiusLarge;
  outline: none;
  cursor: pointer;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: thumbSize;
  height: thumbSize;
  border-radius: borderRadiusCircle;
  background: colorFillPrimary;
  cursor: progress;
  border: borderWidthTertiary solid colorBackgroundTertiary;
  cursor: move; /* fallback if grab cursor is unsupported */
  cursor: grab;
  cursor: -webkit-grab;
}

.slider:active::-webkit-slider-thumb {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

.disabled .slider::-webkit-slider-thumb {
  background: colorTextDisabled; /* Disabled thumb color */
  cursor: not-allowed;
}

.slider::-moz-range-thumb {
  width: thumbSize;
  height: thumbSize;
  border-radius: borderRadiusCircle;
  background: colorFillPrimary;
  cursor: progress;
  border: borderWidthTertiary solid colorBackgroundTertiary;
  cursor: move; /* fallback if grab cursor is unsupported */
  cursor: grab;
  cursor: -moz-grab;
}

.slider:active::-moz-range-thumb {
  cursor: grabbing;
  cursor: -moz-grabbing;
}

.disabled .slider::-moz-range-thumb {
  background: colorTextDisabled; /* Disabled thumb color */
  cursor: not-allowed;
}

/***** Focus Styles *****/
/* Removes default focus */
input[type='range']:focus {
  outline: none;
}

input[type='range']:focus::-webkit-slider-thumb {
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusPrimary;
}

input[type='range']:focus::-moz-range-thumb {
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusPrimary;
}

.sliderTicks {
  display: flex;
  position: absolute;
  top: calc(spaceXXSmall / 4);
  width: sizeFluid;
  justify-content: space-between;
  pointer-events: none; /* Prevent ticks from interfering with slider interaction */
  padding: spaceNone calc(thumbSize / 2); /* Half of thumb size */
}

.sliderTicks option {
  display: flex;
  background-color: colorFillPrimary;
  width: tickSize;
  height: tickSize;
  border-radius: borderRadiusLarge;
  display: flex;
  padding-block-start: spaceNone;
  padding-block-end: spaceNone;
  min-block-size: tickSize;
  padding-inline: spaceNone;
  white-space: nowrap;
}

.sliderTicks option.disabled {
  background-color: colorTextDisabled;
}

.rangeText {
  display: flex;
  min-width: size34;
  min-height: size34;
  justify-content: center;
  align-items: center;
}

.valueInputWrapper {
  max-width: 58px;
}