# Code coverage report for src/components/ui/slider.tsx

# All files / src/components/ui slider.tsx

100% Statements 49/49
100% Branches 3/3
100% Functions 1/1
100% Lines 49/49

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    501x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    40x
    40x
    40x
    40x
    40x
    40x
    40x
    40x
    40x
    40x
    40x
    40x
    40x
    40x
    40x
    40x
    40x
    40x
    40x
    40x
    40x
    40x
    40x
    40x
    40x
    40x
    40x
    40x
    40x
    40x
    40x
    40x
    40x
    40x
    1x
    1x
     import { ComponentProps, forwardRef } from "react"
    import { cn } from "@/lib/utils"

    interface SliderProps extends Omit<ComponentProps<"input">, "type"> {
      value?: number[]
      onValueChange?: (value: number[]) => void
      min?: number
      max?: number
      step?: number
    }

    export const Slider = forwardRef<HTMLInputElement, SliderProps>(
      ({ className, value = [0], onValueChange, min = 0, max = 100, step = 1, ...props }, ref) => {
        const currentValue = value[0] || 0
        const percentage = ((currentValue - min) / (max - min)) * 100

        return (
          <div className={cn("mat-mdc-slider", "mdc-slider", className)}>
            <input
              ref={ref}
              type="range"
              className="mdc-slider__input"
              min={min}
              max={max}
              step={step}
              value={currentValue}
              onChange={(e) => onValueChange?.([Number(e.target.value)])}
              {...props}
            />
            <div className="mdc-slider__track">
              <div className="mdc-slider__track--inactive" />
              <div
                className="mdc-slider__track--active"
                style={{ transform: `scaleX(${percentage / 100})` }}
              >
                <div className="mdc-slider__track--active_fill" />
              </div>
            </div>
            <div
              className="mdc-slider__thumb"
              style={{ left: `${percentage}%` }}
            >
              <div className="mdc-slider__thumb-knob" />
            </div>
          </div>
        )
      }
    )
    Slider.displayName = "Slider"