@opensig/opendesign/es/slider/style/index.css

.o-slider {
  --_input-text-align: center;
  --slider-height: 32px;
  --slider-runway-wrap-padding: 0 4px;
  --slider-runway-wrap-bg: var(--o-color-control4);
  --slider-runway-height: 4px;
  --slider-bar-height: 4px;
  --slider-bar-bg: var(--o-color-control2);
  --slider-btn-wrap-width: 60px;
  --slider-btn-width: 16px;
  --slider-btn-bg: var(--o-color-info1-inverse);
  --slider-btn-border: 4px solid var(--o-color-control4);
  --slider-btn-shadow: var(--o-shadow-1);
  --slider-btn-cursor: pointer;
  --slider-circle-width: 6px;
  --slider-circle-bg: var(--o-color-main1);
  --slider-stop-width: 2px;
  --slider-stop-bg: var(--o-color-info4);
  --slider-marks-font-size: var(--o-font_size-tip1);
  --slider-marks-line-height: var(--o-line_height-tip1);
  --slider-marks-gap: 8px;
  --slider-input-width: 60px;
  --slider-input-unit-gap: 8px;
  --slider-popover-font-size: var(--o-font_size-text1);
  --slider-popover-line-height: var(--o-line_height-text1);
  --slider-unit-font-size: var(--o-font_size-tip2);
  --slider-unit-line-height: var(--o-line_height-tip2);
  --sldier-unit-color: var(--o-color-info3);
}

.o-slider-with-input {
  --slider-runway-wrap-gap: 12px;
}

.o-slider-with-stops {
  --slider-bar-bg-image: var(--o-color-main2);
  --slider-btn-width: 20px;
  --slider-runway-height: 8px;
  --slider-bar-height: 10px;
}

.o-slider-disabled {
  --slider-btn-cursor: not-allowed;
  --slider-circle-bg: var(--o-color-control4);
}

.o-slider-stop-reached {
  --slider-stop-bg: var(--o-color-info1-inverse);
}

.o-slider-btn-wrap-hover {
  --slider-btn-width: 24px;
}

.o-slider-popover {
  --popup-padding: 2px 6px;
}

.o-slider {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--slider-height);
}

.o-slider-runway-wrap {
  width: 100%;
  margin-right: var(--slider-runway-wrap-gap);
  padding: var(--slider-runway-wrap-padding);
  background-color: var(--slider-runway-wrap-bg);
  border-radius: calc(var(--slider-runway-height) / 2);
}

.o-slider-runway {
  position: relative;
  height: var(--slider-runway-height);
  cursor: var(--slider-btn-cursor);
}

.o-slider-bar {
  position: absolute;
  top: calc(var(--slider-runway-height) / 2 - var(--slider-bar-height) / 2);
  height: var(--slider-bar-height);
  background-color: var(--slider-bar-bg);
  background-image: var(--slider-bar-bg-image);
  border-top-left-radius: calc(var(--slider-bar-height) / 2);
  border-bottom-left-radius: calc(var(--slider-bar-height) / 2);
}

.o-slider-btn-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 1;
  top: calc(var(--slider-runway-height) / 2 - var(--slider-btn-width) / 2);
  width: var(--slider-btn-wrap-width);
  transform: translateX(-50%);
  transition: top var(--o-duration-m1) var(--o-easing-linear);
  user-select: none;
  outline: none;
}

.o-slider-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--slider-btn-width);
  height: var(--slider-btn-width);
  background-color: var(--slider-btn-bg);
  border-radius: 50%;
  box-shadow: var(--slider-btn-shadow);
  cursor: var(--slider-btn-cursor);
  transition: width var(--o-duration-m1) var(--o-easing-linear), height var(--o-duration-m1) var(--o-easing-linear), border-width var(--o-duration-m1) var(--o-easing-linear), box-shadow var(--o-duration-m1) var(--o-easing-linear);
}

.o-slider-btn-hover {
  border: var(--slider-btn-border);
  box-shadow: var(--slider-btn-shadow);
}

.o-slider-circle {
  width: var(--slider-circle-width);
  height: var(--slider-circle-width);
  background-color: var(--slider-circle-bg);
  border-radius: 50%;
}

.o-slider-popover {
  font-size: var(--slider-popover-font-size);
  line-height: var(--slider-popover-line-height);
}

.o-slider-stop {
  position: absolute;
  top: calc(var(--slider-runway-height) / 2 - var(--slider-stop-width) / 2);
  height: var(--slider-stop-width);
  width: var(--slider-stop-width);
  background-color: var(--slider-stop-bg);
  border-radius: 50%;
  transform: translateX(-50%);
}

.o-slider-marks-text {
  position: absolute;
  margin-top: var(--slider-marks-gap);
  font-size: var(--slider-marks-font-size);
  line-height: var(--slider-marks-line-height);
  transform: translateX(-50%);
}

.o-slider-input-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.o-slider-input {
  width: var(--slider-input-width);
}

.o-slider-input-unit {
  margin-left: var(--slider-input-unit-gap);
  font-size: var(--slider-unit-font-size);
  line-height: var(--slider-unit-line-height);
  color: var(--sldier-unit-color);
}

@media (max-width: 1680px) {
  .o-slider {
    --slider-popover-font-size: var(--o-font_size-tip1);
    --slider-popover-line-height: var(--o-line_height-tip1);
  }
}
@media (max-width: 840px) {
  .o-slider {
    --slider-btn-width: 24px;
    --slider-stop-width: 3px;
  }
  .o-slider-with-stops {
    --slider-runway-height: 12px;
    --slider-bar-height: 16px;
  }
}