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

30.61% Statements 15/49
100% Branches 0/0
100% Functions 0/0
30.61% Lines 15/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

    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"