.app-slider {

  
    .range-input {
      width: 100%;
      background: transparent;
      cursor: pointer;
      opacity: 1;
  
      &::-webkit-slider-runnable-track {
        height: var(--wm-slider-track-height, 1em);
        border-radius: var(--wm-slider-track-border-radius, 1em);
        background: linear-gradient(var(--wm-slider-max-track-background), var(--wm-slider-max-track-background)) no-repeat;
        position: relative;
        z-index: 0;
      }
  
      &::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: var(--wm-slider-thumb-width);
        height: var(--wm-slider-thumb-height);
        margin-top: calc(
          (var(--wm-slider-track-height, 1em) - var(--wm-slider-thumb-height)) / 2
        );
        border-radius: var(--wm-slider-thumb-border-radius);
        background-color: var(--wm-slider-thumb-background);
        position: relative;
        z-index: 2;
      }
  
      &::after {
        // content: "";
        // position: absolute;
        // top: 62%;
        // left: 0;
        // height: var(--wm-slider-track-height, 1em);
        // border-top-left-radius: var(--wm-slider-track-border-radius);
        // border-bottom-left-radius: var(--wm-slider-track-border-radius);
        // background-color: var(--wm-slider-min-track-background);
        // transform: translateY(-50%);
        // width: 50%; // JS will update dynamically
        // z-index: 2;
        // pointer-events: none;
      }
  

    }

    .slider-mobile-root {
      position: relative;
      margin: 70px 30px 0px 30px;
    }

    .slider-mobile-track {
      display: flex;
      position: relative;
      align-items: center;
      width: 100%;
      height: var(--wm-slider-track-height, 16px);
      border-radius: var(--wm-slider-track-border-radius, 8px);
      overflow: visible;
    }

    .slider-mobile-min-track {
      height: var(--wm-slider-track-height, 16px);
      border-radius: var(--wm-slider-track-border-radius, 8px);
      background-color: var(--wm-slider-min-track-background, #65558F);
    }

    .slider-mobile-max-track {
      height: var(--wm-slider-track-height, 16px);
      border-radius: var(--wm-slider-track-border-radius, 8px);
      background-color: var(--wm-slider-max-track-background, #E7E0EC);
    }

    .slider-mobile-disabled-active {
      background-color: #a9a8aa;
    }

    .slider-mobile-disabled-inactive {
      background-color: #e4e4e4;
    }

    .slider-mobile-disabled-range {
      background-color: #a9a8aa;
    }

    .slider-mobile-thumb-wrapper {
      position: absolute;
      width: calc(var(--wm-slider-thumb-width, 4px) + 10px);
      height: calc(var(--wm-slider-thumb-height, 44px) + 10px);
      border-radius: var(--wm-slider-thumb-border-radius, 2px);
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .slider-mobile-thumb {
      width: var(--wm-slider-thumb-width, 4px);
      height: var(--wm-slider-thumb-height, 44px);
      border-radius: var(--wm-slider-thumb-border-radius, 2px);
      background-color: var(--wm-slider-thumb-background, #65558F);
    }

    .slider-mobile-thumb-disabled {
      background-color: #a9a8aa;
    }

    .slider-mobile-tooltip {
      position: absolute;
      top: -62px;
      width: 58px;
      height: 44px;
      border-radius: 100px;
      background-color: var(--wm-slider-tooltip-background, #322F35);
      display: flex;
      justify-content: center;
      align-items: center;
      transform: translateX(-50%);
    }

    .slider-mobile-tooltip-label {
      width: 58px;
      text-align: center;
      font-size: 16px;
      color: var(--wm-slider-tooltip-color, #F5EFF7);
    }
  }
  