# All files / src/form useSlider.ts

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

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

     "use client";
    import { useState } from "react";
    import { type UseStateInitializer, type UseStateSetter } from "../types.js";
    import { getRangeDefaultValue } from "../utils/getRangeDefaultValue.js";

    /**
     * @remarks \@since 2.5.0
     */
    export interface SliderValueOptions {
      /**
       * The min value for the slider.
       *
       * @defaultValue `0`
       */
      min?: number;

      /**
       * The max value for the slider.
       *
       * @defaultValue `100`
       */
      max?: number;

      /**
       * A positive number representing the value to "jump" while incrementing or
       * decrementing the slider's value. This should normally stay as the default
       * value of `1`, but can also be decimal values if needed.
       *
       * @defaultValue `1`
       */
      step?: number;
    }

    /**
     * @remarks \@since 6.0.0
     */
    export interface SliderState {
      value: number;
      setValue: UseStateSetter<number>;
    }

    /**
     * @remarks \@since 6.0.0
     */
    export interface SliderImplementation
      extends Required<SliderValueOptions>,
        SliderState {}

    /**
     * @remarks \@since 6.0.0
     */
    export interface SliderOptions extends SliderValueOptions {
      /**
       * @defaultValue `(max - min ) / 2`
       */
      defaultValue?: UseStateInitializer<number>;
    }

    /**
     * @example
     * Simple Example
     * ```tsx
     * import { Form, Slider, useSlider } from "@react-md/core";
     * import type { ReactElement } from "react";
     *
     * function Example(): ReactElement {
     *   const slider = useSlider({
     *     // these are the defaults and can be changed
     *     min: 0,
     *     max: 100,
     *     step: 1,
     *     defaultValue: 50,
     *   });
     *
     *   // if you need access to the current value or manually change the value
     *   // yourself.
     *   const { value, setValue } = slider;
     *
     *   return (
     *     <Form>
     *       <Slider {...slider} aria-label="Volume" />
     *     </Form>
     *   );
     * }
     * ```
     *
     * @see The `Slider` component for additional examples.
     * @remarks
     * \@since 2.5.0
     * \@since 6.0.0 Now returns an object instead of an ordered tuple and only
     * return the `value` and `setValue` instead of all the slider functionality. In
     * addition, the hook only accepts a single object argument.
     */
    export function useSlider(options: SliderOptions = {}): SliderImplementation {
      const { min = 0, max = 100, step = 1, defaultValue } = options;
      const [value, setValue] = useState(
        getRangeDefaultValue({
          min,
          max,
          step,
          defaultValue,
        })
      );

      return {
        min,
        max,
        step,
        value,
        setValue,
      };
    }