# All files / src/form useRangeSlider.ts

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

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

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

    /**
     * @remarks
     * \@since 2.5.0
     * \@since 6.0.0 Updated to use labeled tuple.
     */
    export type RangeSliderValue = readonly [minValue: number, maxValue: number];

    /**
     * @remarks \@since 6.0.0
     */
    export interface RangeSliderState {
      rangeValue: RangeSliderValue;
      setRangeValue: UseStateSetter<RangeSliderValue>;
    }

    /**
     * @remarks \@since 6.0.0
     */
    export interface RangeSliderOptions extends SliderValueOptions {
      defaultValue?: UseStateInitializer<RangeSliderValue>;
    }

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

    /**
     * @example
     * Range Slider Example
     * ```tsx
     * import { Fieldset, Form, Legend, Slider, useRangeSlider } from "@react-md/core";
     * import type { ReactElement } from "react";
     * import { useId } from "react";
     *
     * function Example(): ReactElement {
     *   const slider = useRangeSlider({
     *     // these are the defaults and can be changed
     *     min: 0,
     *     max: 100,
     *     step: 1,
     *     defaultValue: [0, 100],
     *   });
     *
     *   // if you need access to the current value or manually change the value
     *   // yourself.
     *   const { rangeValue, setRangeValue } = slider;
     *   const [minPrice, maxPrice] = rangeValue;
     *
     *   return (
     *     <Form>
     *       <Fieldset>
     *         <Legend>Price Range</Legend>
     *         <Slider {...slider} />
     *       </Fieldset>
     *     </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 `rangeValue` and `setRangeValue` instead of all the slider
     * functionality. In addition, the hook only accepts a single object argument.
     */
    export function useRangeSlider(
      options: RangeSliderOptions = {}
    ): RangeSliderImplementation {
      const { min = 0, max = 100, step = 1, defaultValue } = options;
      const [rangeValue, setRangeValue] = useState<RangeSliderValue>(
        defaultValue ?? [min, max]
      );

      return {
        min,
        max,
        step,
        rangeValue,
        setRangeValue,
      };
    }