.slider_do {
  --value: 50%;
  position: relative;
  width: 100%;
  max-width: 800px;
  max-height: 533px;
  margin: 0 auto;
  color: #428bca;
  background-color: #ffffff;
  border: 1px solid #000000;
  aspect-ratio: 1/1;
}
.slider_do label.visually-hidden {
	z-index: 99;
    position: relative;
    margin: 10px;
    color: #fff;
}
.slider__img {
  position: absolute;
  top: 0;
  max-width: none;
  height: 100%;
  object-fit: cover;
}

.slider__img--before {
  left: 0;
  width: var(--value);
  border-right: 1px solid #428bca;
  object-position: left;
}

.slider__img--after {
  right: 0;
  width: calc(100% - var(--value));
  border-left: 1px solid #428bca;
  object-position: right;
}

.slider__range-js::-moz-range-thumb {
  width: 50px;
  height: 50px;
  background-color: currentColor;
  background-image: url(../img/comparision.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 50%;
  transform: translateX(calc(var(--value) - 50%));
  appearance: none;
}

.slider__range-js::-webkit-slider-thumb {
  width: 50px;
  height: 50px;
  background-color: currentColor;
  background-image: url(../img/comparision.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 50%;
  transform: translateX(calc(var(--value) - 50%));
  -webkit-appearance: none;
  appearance: none;
}

.slider__range-js {
  position: absolute;
  margin: 0;
  background-color: transparent;
  outline: 0;
  cursor: col-resize;
  -webkit-appearance: none;
  appearance: none;
  inset: 0;
  color: #428bca !important;
  transition: all .2s;
}

.slider__range-js:hover {
  color: #387db9 !important;
}

.slider__range-js:active {
  color: #387db9 !important;
}

.slider__range-js:focus-visible::-moz-range-thumb {
  outline: auto;
}

.slider__range-js:focus-visible::-webkit-slider-thumb {
  outline: auto;
}