.slider {
  position: relative;
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: $unit-1;
  background: $bg-0-color;
  border-radius: $border-radius;

  &[type="range"]:disabled {
   @include disabled();
  }

  /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
  &::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    background: $primary-color;
    border: 0;
    border-radius: 50%;
    height: $unit-4;
    width: $unit-4;
    padding: 0;
    cursor: pointer; /* Cursor on hover */
  }

  &::-moz-range-thumb {
    height: $unit-4;
    width: $unit-4;
    cursor: pointer; /* Cursor on hover */
  }

  &::-moz-range-progress {
    background: $primary-color;
  }

  &.slider-sm {
    height: $border-width;
    border-radius: 0;

    & + .slider-tooltip {
      font-size: $font-size-sm;
    }
  }

}

.form-slider-range {
  position: relative;
  width: 100%;

  .slider::-webkit-slider-thumb {
    background-color: transparent !important;
  }

  .slider-tooltip {
    position: absolute;
    left: 0;
    pointer-events: none;
    background: $primary-color;
    border-radius: $border-radius;
    width: 40px;
    text-align: center;
    bottom: -2px;
  }
}