@fluentui/react-slider 9.0.0-alpha.11 → 9.0.0-alpha.12

package/CHANGELOG.json

@@ -2,7 +2,64 @@
   "name": "@fluentui/react-slider",
   "entries": [
     {
-      "date": "Fri, 24 Sep 2021 09:16:15 GMT",
+      "date": "Mon, 27 Sep 2021 08:04:28 GMT",
+      "tag": "@fluentui/react-slider_v9.0.0-alpha.12",
+      "version": "9.0.0-alpha.12",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "czearing@outlook.com",
+            "package": "@fluentui/react-slider",
+            "comment": "Adding the RangedSlider component.",
+            "commit": "7a6d4d03fc1157272a6641fd05fc27f51ba1cc0e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-make-styles to v9.0.0-alpha.73",
+            "commit": "7a6d4d03fc1157272a6641fd05fc27f51ba1cc0e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-tabster to v9.0.0-alpha.67",
+            "commit": "7a6d4d03fc1157272a6641fd05fc27f51ba1cc0e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-alpha.53",
+            "commit": "7a6d4d03fc1157272a6641fd05fc27f51ba1cc0e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/jest-serializer-make-styles to v9.0.0-alpha.48",
+            "commit": "7a6d4d03fc1157272a6641fd05fc27f51ba1cc0e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-conformance-make-styles to v9.0.0-alpha.17",
+            "commit": "7a6d4d03fc1157272a6641fd05fc27f51ba1cc0e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/react-label to v9.0.0-alpha.46",
+            "commit": "7a6d4d03fc1157272a6641fd05fc27f51ba1cc0e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-slider",
+            "comment": "Bump @fluentui/babel-make-styles to v9.0.0-alpha.55",
+            "commit": "7a6d4d03fc1157272a6641fd05fc27f51ba1cc0e"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 24 Sep 2021 09:17:17 GMT",
       "tag": "@fluentui/react-slider_v9.0.0-alpha.11",
       "version": "9.0.0-alpha.11",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,28 @@
 # Change Log - @fluentui/react-slider
 
-This log was last generated on Fri, 24 Sep 2021 09:16:15 GMT and should not be manually modified.
+This log was last generated on Mon, 27 Sep 2021 08:04:28 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.0-alpha.12)
+
+Mon, 27 Sep 2021 08:04:28 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.0-alpha.11..@fluentui/react-slider_v9.0.0-alpha.12)
+
+### Changes
+
+- Adding the RangedSlider component. ([commit](https://github.com/microsoft/fluentui/commit/7a6d4d03fc1157272a6641fd05fc27f51ba1cc0e) by czearing@outlook.com)
+- Bump @fluentui/react-make-styles to v9.0.0-alpha.73 ([commit](https://github.com/microsoft/fluentui/commit/7a6d4d03fc1157272a6641fd05fc27f51ba1cc0e) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0-alpha.67 ([commit](https://github.com/microsoft/fluentui/commit/7a6d4d03fc1157272a6641fd05fc27f51ba1cc0e) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-alpha.53 ([commit](https://github.com/microsoft/fluentui/commit/7a6d4d03fc1157272a6641fd05fc27f51ba1cc0e) by beachball)
+- Bump @fluentui/jest-serializer-make-styles to v9.0.0-alpha.48 ([commit](https://github.com/microsoft/fluentui/commit/7a6d4d03fc1157272a6641fd05fc27f51ba1cc0e) by beachball)
+- Bump @fluentui/react-conformance-make-styles to v9.0.0-alpha.17 ([commit](https://github.com/microsoft/fluentui/commit/7a6d4d03fc1157272a6641fd05fc27f51ba1cc0e) by beachball)
+- Bump @fluentui/react-label to v9.0.0-alpha.46 ([commit](https://github.com/microsoft/fluentui/commit/7a6d4d03fc1157272a6641fd05fc27f51ba1cc0e) by beachball)
+- Bump @fluentui/babel-make-styles to v9.0.0-alpha.55 ([commit](https://github.com/microsoft/fluentui/commit/7a6d4d03fc1157272a6641fd05fc27f51ba1cc0e) by beachball)
+
 ## [9.0.0-alpha.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.0-alpha.11)
 
-Fri, 24 Sep 2021 09:16:15 GMT 
+Fri, 24 Sep 2021 09:17:17 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.0-alpha.10..@fluentui/react-slider_v9.0.0-alpha.11)
 
 ### Changes

package/README.md

@@ -2,8 +2,7 @@
 
 **React Slider components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
 
-The Slider component allows users to quickly select a value (or range) by dragging an icon across a bar. It is often used when setting
-values with a relaxed precision such as audio volume and screen brightness.
+The Slider component allows users to quickly select a value (or range) by dragging a thumb across a rail. It is often used when setting values with a relaxed precision such as audio volume and screen brightness.
 
 ## STATUS: WIP 🚧
 

package/dist/react-slider.d.ts

@@ -3,13 +3,79 @@ import { ComponentState } from '@fluentui/react-utilities';
 import { IntrinsicShorthandProps } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 
+export declare const lowerThumbClassName: string;
+
+/**
+ * The RangedSlider component allows users to quickly select a range by dragging a lower or upper thumb across a rail.
+ */
+export declare const RangedSlider: React_2.ForwardRefExoticComponent<RangedSliderProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface RangedSliderCommons extends Omit<SliderCommons, 'value' | 'defaultValue' | 'origin' | 'onChange'> {
+    /**
+     * The starting value for an uncontrolled RangedSlider. The first value is always lower than the second value.
+     * Mutually exclusive with `value` prop.
+     */
+    defaultValue?: [number, number];
+    /**
+     * The current value of the controlled RangedSlider. The first value is always lower than the second value.
+     * Mutually exclusive with `defaultValue` prop.
+     */
+    value?: [number, number];
+    /**
+     * Triggers a callback when the value has been changed. This will be called on every individual step.
+     */
+    onChange?: (ev: React_2.PointerEvent<HTMLDivElement> | React_2.KeyboardEvent<HTMLDivElement>, data: {
+        value: [number, number];
+    }) => void;
+}
+
+export declare interface RangedSliderProps extends Omit<ComponentProps<RangedSliderSlots>, 'onChange' | 'defaultValue'>, RangedSliderCommons {
+}
+
+export declare type RangedSliderSlots = Omit<SliderSlots, 'thumb' | 'thumbWrapper' | 'input'> & {
+    /**
+     * The lower draggable icon used to select a given value in the RangedSlider.
+     */
+    lowerThumb: IntrinsicShorthandProps<'div'>;
+    /**
+     * The wrapper around the RangedSlider's lower thumb.
+     * It is primarily used to handle the dragging animation from translateX.
+     */
+    lowerThumbWrapper: IntrinsicShorthandProps<'div'>;
+    /**
+     * The upper draggable icon used to select a given value in the RangedSlider.
+     */
+    upperThumb: IntrinsicShorthandProps<'div'>;
+    /**
+     * The wrapper around the RangedSlider's upper thumb.
+     * It is primarily used to handle the dragging animation from translateX.
+     */
+    upperThumbWrapper: IntrinsicShorthandProps<'div'>;
+    /**
+     * The hidden input for the Slider's lower thumb.
+     */
+    lowerInput: IntrinsicShorthandProps<'input'>;
+    /**
+     * The hidden input for the Slider's upper thumb.
+     */
+    upperInput: IntrinsicShorthandProps<'input'>;
+};
+
+export declare interface RangedSliderState extends ComponentState<RangedSliderSlots>, RangedSliderCommons {
+}
+
+/**
+ * Render the final JSX of RangedSlider
+ */
+export declare const renderRangedSlider: (state: RangedSliderState) => JSX.Element;
+
 /**
  * Render the final JSX of Slider
  */
 export declare const renderSlider: (state: SliderState) => JSX.Element;
 
 /**
- * Define a styled Slider, using the `useSlider` hook
+ * The Slider component allows users to quickly select a value by dragging a thumb across a rail.
  */
 export declare const Slider: React_2.ForwardRefExoticComponent<Pick<ComponentProps<SliderSlots, "root">, "input" | "slot" | "style" | "title" | "track" | "children" | "key" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "rail" | "sliderWrapper" | "trackWrapper" | "marksWrapper" | "thumbWrapper" | "thumb" | "activeRail" | "as"> & SliderCommons & React_2.RefAttributes<HTMLDivElement>>;
 
@@ -146,6 +212,17 @@ export declare type SliderSlots = {
 
 export declare type SliderState = ComponentState<SliderSlots> & SliderCommons;
 
+export declare const upperThumbClassName: string;
+
+/**
+ * Given user props, returns state and render function for a RangedSlider.
+ */
+export declare const useRangedSlider: (props: RangedSliderProps, ref: React_2.Ref<HTMLElement>) => RangedSliderState;
+
+export declare const useRangedSliderState: (state: RangedSliderState) => RangedSliderState;
+
+export declare const useRangedSliderStyles: (state: RangedSliderState) => RangedSliderState;
+
 /**
  * Given user props, returns state and render function for a Slider.
  */

package/lib/RangedSlider.d.ts

@@ -0,0 +1 @@
+export * from './components/RangedSlider/index';

package/lib/RangedSlider.js

@@ -0,0 +1,2 @@
+export * from './components/RangedSlider/index';
+//# sourceMappingURL=RangedSlider.js.map

package/lib/RangedSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangedSlider.js","sourceRoot":"","sources":["../src/RangedSlider.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC"}

package/lib/components/RangedSlider/RangedSlider.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { RangedSliderProps } from './RangedSlider.types';
+/**
+ * The RangedSlider component allows users to quickly select a range by dragging a lower or upper thumb across a rail.
+ */
+export declare const RangedSlider: React.ForwardRefExoticComponent<RangedSliderProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/RangedSlider/RangedSlider.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { renderRangedSlider } from './renderRangedSlider';
+import { useRangedSlider } from './useRangedSlider';
+import { useRangedSliderStyles } from './useRangedSliderStyles';
+/**
+ * The RangedSlider component allows users to quickly select a range by dragging a lower or upper thumb across a rail.
+ */
+
+export var RangedSlider = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var state = useRangedSlider(props, ref);
+  useRangedSliderStyles(state);
+  return renderRangedSlider(state);
+});
+RangedSlider.displayName = 'RangedSlider';
+//# sourceMappingURL=RangedSlider.js.map

package/lib/components/RangedSlider/RangedSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/RangedSlider/RangedSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,sBAAnC;AACA,SAAS,eAAT,QAAgC,mBAAhC;AACA,SAAS,qBAAT,QAAsC,yBAAtC;AAGA;;AAEG;;AACH,OAAO,IAAM,YAAY,gBAAG,KAAK,CAAC,UAAN,CAAoD,UAAC,KAAD,EAAQ,GAAR,EAAW;AACzF,MAAM,KAAK,GAAG,eAAe,CAAC,KAAD,EAAQ,GAAR,CAA7B;AAEA,EAAA,qBAAqB,CAAC,KAAD,CAArB;AAEA,SAAO,kBAAkB,CAAC,KAAD,CAAzB;AACD,CAN2B,CAArB;AAOP,YAAY,CAAC,WAAb,GAA2B,cAA3B","sourceRoot":""}

package/lib/components/RangedSlider/RangedSlider.types.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { ComponentState, ComponentProps, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import type { SliderSlots, SliderCommons } from '../Slider/Slider.types';
+export declare type RangedSliderSlots = Omit<SliderSlots, 'thumb' | 'thumbWrapper' | 'input'> & {
+    /**
+     * The lower draggable icon used to select a given value in the RangedSlider.
+     */
+    lowerThumb: IntrinsicShorthandProps<'div'>;
+    /**
+     * The wrapper around the RangedSlider's lower thumb.
+     * It is primarily used to handle the dragging animation from translateX.
+     */
+    lowerThumbWrapper: IntrinsicShorthandProps<'div'>;
+    /**
+     * The upper draggable icon used to select a given value in the RangedSlider.
+     */
+    upperThumb: IntrinsicShorthandProps<'div'>;
+    /**
+     * The wrapper around the RangedSlider's upper thumb.
+     * It is primarily used to handle the dragging animation from translateX.
+     */
+    upperThumbWrapper: IntrinsicShorthandProps<'div'>;
+    /**
+     * The hidden input for the Slider's lower thumb.
+     */
+    lowerInput: IntrinsicShorthandProps<'input'>;
+    /**
+     * The hidden input for the Slider's upper thumb.
+     */
+    upperInput: IntrinsicShorthandProps<'input'>;
+};
+export interface RangedSliderCommons extends Omit<SliderCommons, 'value' | 'defaultValue' | 'origin' | 'onChange'> {
+    /**
+     * The starting value for an uncontrolled RangedSlider. The first value is always lower than the second value.
+     * Mutually exclusive with `value` prop.
+     */
+    defaultValue?: [number, number];
+    /**
+     * The current value of the controlled RangedSlider. The first value is always lower than the second value.
+     * Mutually exclusive with `defaultValue` prop.
+     */
+    value?: [number, number];
+    /**
+     * Triggers a callback when the value has been changed. This will be called on every individual step.
+     */
+    onChange?: (ev: React.PointerEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, data: {
+        value: [number, number];
+    }) => void;
+}
+export interface RangedSliderProps extends Omit<ComponentProps<RangedSliderSlots>, 'onChange' | 'defaultValue'>, RangedSliderCommons {
+}
+export interface RangedSliderState extends ComponentState<RangedSliderSlots>, RangedSliderCommons {
+}

package/lib/components/RangedSlider/RangedSlider.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=RangedSlider.types.js.map

package/lib/components/RangedSlider/RangedSlider.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangedSlider.types.js","sourceRoot":"","sources":["../../../src/components/RangedSlider/RangedSlider.types.ts"],"names":[],"mappings":""}

package/lib/components/RangedSlider/index.d.ts

@@ -0,0 +1,6 @@
+export * from './RangedSlider';
+export * from './RangedSlider.types';
+export * from './renderRangedSlider';
+export * from './useRangedSlider';
+export * from './useRangedSliderState';
+export * from './useRangedSliderStyles';

package/lib/components/RangedSlider/index.js

@@ -0,0 +1,7 @@
+export * from './RangedSlider';
+export * from './RangedSlider.types';
+export * from './renderRangedSlider';
+export * from './useRangedSlider';
+export * from './useRangedSliderState';
+export * from './useRangedSliderStyles';
+//# sourceMappingURL=index.js.map

package/lib/components/RangedSlider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/RangedSlider/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC"}

package/lib/components/RangedSlider/renderRangedSlider.d.ts

@@ -0,0 +1,5 @@
+import type { RangedSliderState } from './RangedSlider.types';
+/**
+ * Render the final JSX of RangedSlider
+ */
+export declare const renderRangedSlider: (state: RangedSliderState) => JSX.Element;

package/lib/components/RangedSlider/renderRangedSlider.js

@@ -0,0 +1,20 @@
+import { __assign } from "tslib";
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+/**
+ * Array of all shorthand properties listed in RangedSliderSlots.
+ */
+
+var rangedSliderShorthandProps = ['activeRail', 'lowerInput', 'lowerThumb', 'lowerThumbWrapper', 'marksWrapper', 'rail', 'root', 'sliderWrapper', 'track', 'trackWrapper', 'upperInput', 'upperThumb', 'upperThumbWrapper'];
+/**
+ * Render the final JSX of RangedSlider
+ */
+
+export var renderRangedSlider = function (state) {
+  var _a = getSlots(state, rangedSliderShorthandProps),
+      slots = _a.slots,
+      slotProps = _a.slotProps;
+
+  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), state.marks && /*#__PURE__*/React.createElement(slots.marksWrapper, __assign({}, slotProps.marksWrapper)), /*#__PURE__*/React.createElement(slots.sliderWrapper, __assign({}, slotProps.sliderWrapper), /*#__PURE__*/React.createElement(slots.rail, __assign({}, slotProps.rail)), /*#__PURE__*/React.createElement(slots.trackWrapper, __assign({}, slotProps.trackWrapper), /*#__PURE__*/React.createElement(slots.track, __assign({}, slotProps.track))), /*#__PURE__*/React.createElement(slots.lowerThumbWrapper, __assign({}, slotProps.lowerThumbWrapper), /*#__PURE__*/React.createElement(slots.lowerInput, __assign({}, slotProps.lowerInput)), /*#__PURE__*/React.createElement(slots.lowerThumb, __assign({}, slotProps.lowerThumb))), /*#__PURE__*/React.createElement(slots.upperThumbWrapper, __assign({}, slotProps.upperThumbWrapper), /*#__PURE__*/React.createElement(slots.upperInput, __assign({}, slotProps.upperInput)), /*#__PURE__*/React.createElement(slots.upperThumb, __assign({}, slotProps.upperThumb))), /*#__PURE__*/React.createElement(slots.activeRail, __assign({}, slotProps.activeRail))));
+};
+//# sourceMappingURL=renderRangedSlider.js.map

package/lib/components/RangedSlider/renderRangedSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/RangedSlider/renderRangedSlider.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,IAAM,0BAA0B,GAAgC,CAC9D,YAD8D,EAE9D,YAF8D,EAG9D,YAH8D,EAI9D,mBAJ8D,EAK9D,cAL8D,EAM9D,MAN8D,EAO9D,MAP8D,EAQ9D,eAR8D,EAS9D,OAT8D,EAU9D,cAV8D,EAW9D,YAX8D,EAY9D,YAZ8D,EAa9D,mBAb8D,CAAhE;AAgBA;;AAEG;;AACH,OAAO,IAAM,kBAAkB,GAAG,UAAC,KAAD,EAAyB;AACnD,MAAA,EAAA,GAAuB,QAAQ,CAAoB,KAApB,EAA2B,0BAA3B,CAA/B;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,KAAK,CAAC,KAAN,iBAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,YAAP,EAAmB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,YAAf,CAAnB,CADlB,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,aAAP,EAAoB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,aAAf,CAApB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,YAAP,EAAmB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,YAAf,CAAnB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,KAAf,CAAZ,CADF,CAFF,eAKE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,iBAAP,EAAwB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,iBAAf,CAAxB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,UAAf,CAAjB,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,UAAf,CAAjB,CAFF,CALF,eASE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,iBAAP,EAAwB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,iBAAf,CAAxB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,UAAf,CAAjB,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,UAAf,CAAjB,CAFF,CATF,eAaE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,UAAf,CAAjB,CAbF,CAFF,CADF;AAoBD,CAvBM","sourceRoot":""}

package/lib/components/RangedSlider/useRangedSlider.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { RangedSliderProps, RangedSliderState } from './RangedSlider.types';
+/**
+ * Given user props, returns state and render function for a RangedSlider.
+ */
+export declare const useRangedSlider: (props: RangedSliderProps, ref: React.Ref<HTMLElement>) => RangedSliderState;

package/lib/components/RangedSlider/useRangedSlider.js

@@ -0,0 +1,116 @@
+import { __assign } from "tslib";
+import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';
+import { useRangedSliderState } from './useRangedSliderState';
+/**
+ * Given user props, returns state and render function for a RangedSlider.
+ */
+
+export var useRangedSlider = function (props, ref) {
+  var // Props
+  ariaValueText = props.ariaValueText,
+      defaultValue = props.defaultValue,
+      disabled = props.disabled,
+      keyboardStep = props.keyboardStep,
+      marks = props.marks,
+      max = props.max,
+      min = props.min,
+      onChange = props.onChange,
+      _a = props.size,
+      size = _a === void 0 ? 'medium' : _a,
+      _b = props.step,
+      step = _b === void 0 ? 1 : _b,
+      value = props.value,
+      vertical = props.vertical,
+      // Slots
+  activeRail = props.activeRail,
+      lowerInput = props.lowerInput,
+      lowerThumb = props.lowerThumb,
+      lowerThumbWrapper = props.lowerThumbWrapper,
+      marksWrapper = props.marksWrapper,
+      rail = props.rail,
+      sliderWrapper = props.sliderWrapper,
+      track = props.track,
+      trackWrapper = props.trackWrapper,
+      upperInput = props.upperInput,
+      upperThumb = props.upperThumb,
+      upperThumbWrapper = props.upperThumbWrapper;
+  var state = {
+    ariaValueText: ariaValueText,
+    defaultValue: defaultValue,
+    disabled: disabled,
+    keyboardStep: keyboardStep,
+    marks: marks,
+    max: max,
+    min: min,
+    onChange: onChange,
+    size: size,
+    step: step,
+    value: value,
+    vertical: vertical,
+    components: {
+      activeRail: 'div',
+      lowerInput: 'input',
+      lowerThumb: 'div',
+      lowerThumbWrapper: 'div',
+      marksWrapper: 'div',
+      rail: 'div',
+      root: 'div',
+      track: 'div',
+      trackWrapper: 'div',
+      sliderWrapper: 'div',
+      upperInput: 'input',
+      upperThumb: 'div',
+      upperThumbWrapper: 'div'
+    },
+    root: getNativeElementProps('span', __assign(__assign({
+      ref: ref
+    }, props), {
+      id: useId('ranged-slider-', props.id)
+    })),
+    activeRail: resolveShorthand(activeRail, {
+      required: true
+    }),
+    lowerInput: resolveShorthand(lowerInput, {
+      required: true,
+      defaultProps: {
+        type: 'range'
+      }
+    }),
+    upperInput: resolveShorthand(upperInput, {
+      required: true,
+      defaultProps: {
+        type: 'range'
+      }
+    }),
+    lowerThumb: resolveShorthand(lowerThumb, {
+      required: true
+    }),
+    lowerThumbWrapper: resolveShorthand(lowerThumbWrapper, {
+      required: true
+    }),
+    marksWrapper: resolveShorthand(marksWrapper, {
+      required: true
+    }),
+    rail: resolveShorthand(rail, {
+      required: true
+    }),
+    track: resolveShorthand(track, {
+      required: true
+    }),
+    trackWrapper: resolveShorthand(trackWrapper, {
+      required: true
+    }),
+    sliderWrapper: resolveShorthand(sliderWrapper, {
+      required: true
+    }),
+    upperThumb: resolveShorthand(upperThumb, {
+      required: true
+    }),
+    upperThumbWrapper: resolveShorthand(upperThumbWrapper, {
+      required: true
+    })
+  };
+  useRangedSliderState(state);
+  return state;
+};
+//# sourceMappingURL=useRangedSlider.js.map

package/lib/components/RangedSlider/useRangedSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/RangedSlider/useRangedSlider.ts"],"names":[],"mappings":"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","sourceRoot":""}

package/lib/components/RangedSlider/useRangedSliderState.d.ts

@@ -0,0 +1,2 @@
+import type { RangedSliderState } from './RangedSlider.types';
+export declare const useRangedSliderState: (state: RangedSliderState) => RangedSliderState;