.range_container {
      --_marker-border-clr: #ffffff;
      --_marker-size: 15px;
      --_track-heigt: 3px;
    
      --_tooltip-bg-clr: rgba(0, 0, 0, 0.4);
      --_tooltip-txt-clr: var(--_marker-border-clr);
        
      width: 100%;
      max-width: 600px;
      display: flex;
      flex-direction: column;
  }
  
  .sliders_control {
      position: relative;
  }
  
  .slider-tooltip {
      position: absolute;
      top: -2.8rem;
      left: 0;
      width: fit-content;
      background-color: black;
      color: rgb(255, 255, 255);
      font-size: 0.8rem;
      border-radius: 4px;
      padding: 0.5rem .5rem;
      text-align: center;
      translate: -50% 0;
  }
  
  .slider-tooltip::before {
      content: "";
      position: absolute;
      bottom: -0.25rem;
      left: 50%;
      translate: -50% 0;
      width: .5rem;
      height: .5rem;
      rotate: 45deg;
      z-index: -1;
      background-color: inherit;
  }
  
  input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      pointer-events: all;
      width: var(--_marker-size);
      height: var(--_marker-size);
      background-color: var(--_marker-border-clr);
      border-radius: 50%;
      box-shadow: 0 0 0 3px gray;
      cursor: pointer;
  }
  
  input[type=range]::-moz-range-thumb {
      -webkit-appearance: none;
      pointer-events: all;
      width: var(--_marker-size);
      height: var(--_marker-size);
      background-color: var(--_marker-border-clr);
      border-radius: 50%;
      box-shadow: 0 0 0 1px var(--_marker-border-clr);
      cursor: pointer;
  }
  
  input[type=range]::-webkit-slider-thumb:hover {
      background: #f7f7f7;
  }
  
  input[type=range]::-webkit-slider-thumb:active {
      box-shadow: inset 0 0 3px #000000, 0 0 9px #000000;
      -webkit-box-shadow: inset 0 0 3px #000000, 0 0 9px #000000;
  }
  
  input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      height: var(--_track-heigt);
      width: 100%;
      position: absolute;
      background-color: var(--_marker-border-clr);
      pointer-events: none;
  }
  
  #fromSlider {
      height: 0;
      z-index: 1;
  }