# All files / src/form SliderTrack.tsx

0% Statements 0/123
0% Branches 0/1
0% Functions 0/1
0% Lines 0/123

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
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124

     import { cnb } from "cnbuilder";
    import { forwardRef, type HTMLAttributes } from "react";
    import { bem } from "../utils/bem.js";
    import {
      getClosestThumbEventHandlers,
      getThumbOffsets,
      type ClosestThumbEventHandlersOptions,
      type ThumbOffsetsOptions,
    } from "./sliderUtils.js";

    const styles = bem("rmd-slider-track");

    /**
     * @internal
     * @remarks
     * \@since 2.5.0
     * \@since 6.0.0 Updated to be internal only.
     */
    export interface SliderTrackProps
      extends HTMLAttributes<HTMLSpanElement>,
        ClosestThumbEventHandlersOptions,
        ThumbOffsetsOptions {
      animate: boolean;
      disabled: boolean;
    }

    /**
     * **Server Component**
     *
     * @internal
     * @remarks
     * \@since 2.5.0
     * \@since 6.0.0 Updated to be internal only.
     */
    export const SliderTrack = forwardRef<HTMLSpanElement, SliderTrackProps>(
      function SliderTrack(props, ref) {
        const {
          style,
          className,
          animate,
          vertical,
          disabled,
          min,
          max,
          thumb1Ref,
          thumb1Value,
          thumb1Dragging,
          thumb1DragPercentage,
          thumb1OnMouseUp,
          thumb1OnMouseDown,
          thumb1OnMouseMove,
          thumb1OnTouchStart,
          thumb1OnTouchMove,
          thumb2Ref,
          thumb2Value,
          thumb2Dragging,
          thumb2DragPercentage,
          thumb2OnMouseUp,
          thumb2OnMouseDown,
          thumb2OnMouseMove,
          thumb2OnTouchStart,
          thumb2OnTouchMove,
          isRangeSlider,
          children,
          ...remaining
        } = props;

        return (
          <span
            {...remaining}
            ref={ref}
            style={{
              ...style,
              ...getThumbOffsets({
                min,
                max,
                thumb1Value,
                thumb1Dragging,
                thumb1DragPercentage,
                thumb2Value,
                thumb2Dragging,
                thumb2DragPercentage,
                isRangeSlider,
              }),
            }}
            className={cnb(
              styles({
                animate,
                disabled,
                hoverable: !disabled,
                h: !vertical,
                h1: !vertical && !isRangeSlider,
                h2: !vertical && isRangeSlider,
                v: vertical,
                v1: vertical && !isRangeSlider,
                v2: vertical && isRangeSlider,
              }),
              className
            )}
            {...getClosestThumbEventHandlers({
              vertical,
              isRangeSlider,
              thumb1Ref,
              thumb1Dragging,
              thumb1OnMouseUp,
              thumb1OnMouseDown,
              thumb1OnMouseMove,
              thumb1OnTouchStart,
              thumb1OnTouchMove,
              thumb2Ref,
              thumb2Dragging,
              thumb2OnMouseUp,
              thumb2OnMouseDown,
              thumb2OnMouseMove,
              thumb2OnTouchStart,
              thumb2OnTouchMove,
            })}
          >
            {children}
          </span>
        );
      }
    );