Mixin 2 soln - range exercise

[fmanimashaun]

Proposed solution!

After going through the mixin lecture, I was able to come up with the following solution:

Mixin file

@mixin range-track-extra() {
  box-shadow: 1px 1px 1px $black, 0px 0px 1px $cod-gray;
  background: $darkblue;
  border-radius: 1.3px;
  border: 0.2px solid $cod-gray;
}


@mixin range-track() {
  &::-webkit-slider-runnable-track {
    @content;
    @include range-track-extra();
  }

  &:focus::-webkit-slider-runnable-track {
    background: $lightblue;
  }

  &::-moz-range-track {
    @content;
    @include range-track-extra();
  }

  &::-ms-track {
    @content;
    background: transparent;
    border-color: transparent;
    border-width: 16px 0;
    color: transparent;
  }
}


@mixin range-thumb() {
  &::-webkit-slider-thumb {
    @content;
    -webkit-appearance: none;
    margin-top: -14px;
  }

  &::-moz-range-thumb {
    @content;
  }

  &::-ms-thumb {
    @content;
  }
}

@mixin fill() {

  &::-ms-fill-lower {
    @content;
  }

  &::-ms-fill-upper {
    @content;
  }

  &:focus::-ms-fill-lower {
    background: $lightblue;
  }

  &:focus::-ms-fill-upper {
    background: $lightblue;
  }
}

App file

@import '_variables';
@import '_mixins';

input[type="range"] {
  -webkit-appearance: none;
  margin: 18px 0;
  width: 100%;

  &:focus {
    outline: none;
  }

  @include range-track() {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
  }

  @include range-thumb() {
    box-shadow: 1px 1px 1px $black, 0px 0px 1px $cod-gray;
    border: 1px solid $black;
    height: 36px;
    width: 16px;
    border-radius: 3px;
    background: $white;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -14px;
  }

  @include fill() {
    background: $darkblue;
    border: 0.2px solid $cod-gray;
    border-radius: 2.6px;
    box-shadow: 1px 1px 1px $black, 0px 0px 1px $cod-gray;
  }
}