.MYUI-Slider {
  position: relative;
  width: 100%;
  border-radius: var(--border_radius_hard);
}

.MYUI-Slider input[type='range'] {
  z-index: 2;
  display: block;
  appearance: none;
  width: 100%;
  margin: 0px;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  overflow: hidden;
  background: rgba(var(--background_secondary));
  height: 22px;
  border: solid 1px rgba(--background_primary);
}

.MYUI-Slider input[type='range']::-webkit-slider-thumb {
  background: rgba(var(--background_primary));
  height: 22px;
  width: 22px;

  -webkit-appearance: none;
  appearance: none;
  box-shadow: -100vw 0 0 calc(100vw - 12px) rgba(var(--background_primary));
  border: solid 1px rgba(var(--background_dark_2), 0.2);
  cursor: pointer;
  border-radius: 50%;
}

.MYUI-Slider input[type='range']:disabled::-webkit-slider-thumb {
  opacity: 0.7;
}