pico/scss/forms/_input-range.scss

@use "../settings" as *;

/**
 * Input type range
 */

[type="range"] {
  // Config
  $height-track: 0.25rem;
  $height-thumb: 1.25rem;
  $border-thumb: 2px;

  // Styles
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: $height-thumb;
  background: none;

  // Slider Track
  @mixin slider-track {
    width: 100%;
    height: $height-track;
    border-radius: var(#{$✨}border-radius);
    background-color: var(#{$✨}range-border-color);

    @if $enable-transitions {
      transition: background-color var(#{$✨}transition), box-shadow var(#{$✨}transition);
    }
  }

  &::-webkit-slider-runnable-track {
    @include slider-track;
  }

  &::-moz-range-track {
    @include slider-track;
  }

  &::-ms-track {
    @include slider-track;
  }

  // Slider Thumb
  @mixin slider-thumb {
    -webkit-appearance: none;
    width: $height-thumb;
    height: $height-thumb;
    margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
    border: $border-thumb solid var(#{$✨}range-thumb-border-color);
    border-radius: 50%;
    background-color: var(#{$✨}range-thumb-color);
    cursor: pointer;

    @if $enable-transitions {
      transition: background-color var(#{$✨}transition), transform var(#{$✨}transition);
    }
  }
  &::-webkit-slider-thumb {
    @include slider-thumb;
  }

  &::-moz-range-thumb {
    @include slider-thumb;
  }

  &::-ms-thumb {
    @include slider-thumb;
  }

  &:hover,
  &:focus {
    #{$✨}range-border-color: var(#{$✨}range-active-border-color);
    #{$✨}range-thumb-color: var(#{$✨}range-thumb-hover-color);
  }

  &:active {
    #{$✨}range-thumb-color: var(#{$✨}range-thumb-active-color);

    // Slider Thumb
    &::-webkit-slider-thumb {
      transform: scale(1.25);
    }

    &::-moz-range-thumb {
      transform: scale(1.25);
    }

    &::-ms-thumb {
      transform: scale(1.25);
    }
  }
}