sogo/UI/WebServerResources/scss/components/slider/slider-theme.scss

md-slider.md-THEME_NAME-theme {

  .md-track {
    background-color: '{{foreground-3}}';
  }
  .md-track-ticks {
    background-color: '{{foreground-4}}';
  }
  .md-focus-thumb {
    background-color: '{{foreground-2}}';
  }
  .md-focus-ring {
    border-color: '{{foreground-4}}';
  }
  .md-disabled-thumb {
    border-color: '{{background-hue-3}}';
  }
  &.md-min .md-thumb:after {
    background-color: '{{background-hue-3}}';
  }

  .md-track.md-track-fill {
    background-color: '{{primary-color}}';
  }
  .md-thumb:after {
    border-color: '{{primary-color}}';
    background-color: '{{primary-color}}';
  }
  .md-sign {
    background-color: '{{primary-color}}';
    &:after {
      border-top-color: '{{primary-color}}';
    }
  }
  .md-thumb-text {
    color: '{{primary-contrast}}';
  }

  &.md-warn {
    .md-track-fill {
      background-color: '{{warn-color}}';
    }
    .md-thumb:after {
      border-color: '{{warn-color}}';
      background-color: '{{warn-color}}';
    }
    .md-sign {
      background-color: '{{warn-color}}';

      &:after {
        border-top-color: '{{warn-color}}';
      }
    }
    .md-thumb-text {
      color: '{{warn-contrast}}';
    }
  }

  &.md-accent {
    .md-track-fill {
      background-color: '{{accent-color}}';
    }
    .md-thumb:after {
      border-color: '{{accent-color}}';
      background-color: '{{accent-color}}';
    }
    .md-sign {
      background-color: '{{accent-color}}';

      &:after {
        border-top-color: '{{accent-color}}';
      }
    }
    .md-thumb-text {
      color: '{{accent-contrast}}';
    }
  }

  &[disabled] {
    .md-thumb:after {
      border-color: '{{foreground-3}}';
    }
    &:not(.md-min) .md-thumb:after {
      background-color: '{{foreground-3}}';
    }
  }
}