text: import { useEffect, useRef } from 'react';
  import { isBrowser, noop, off, on } from './misc/util';
  import useMountedState from './useMountedState';
  import useSetState from './useSetState';
  var useSlider = function (ref, options) {
      if (options === void 0) { options = {}; }
      var isMounted = useMountedState();
      var isSliding = useRef(false);
      var valueRef = useRef(0);
      var frame = useRef(0);
      var _a = useSetState({
          isSliding: false,
          value: 0,
      }), state = _a[0], setState = _a[1];
      valueRef.current = state.value;
      useEffect(function () {
          if (isBrowser) {
              var styles = options.styles === undefined ? true : options.styles;
              var reverse_1 = options.reverse === undefined ? false : options.reverse;
              if (ref.current && styles) {
                  ref.current.style.userSelect = 'none';
              }
              var startScrubbing_1 = function () {
                  if (!isSliding.current && isMounted()) {
                      (options.onScrubStart || noop)();
                      isSliding.current = true;
                      setState({ isSliding: true });
                      bindEvents_1();
                  }
              };
              var stopScrubbing_1 = function () {
                  if (isSliding.current && isMounted()) {
                      (options.onScrubStop || noop)(valueRef.current);
                      isSliding.current = false;
                      setState({ isSliding: false });
                      unbindEvents_1();
                  }
              };
              var onMouseDown_1 = function (event) {
                  startScrubbing_1();
                  onMouseMove_1(event);
              };
              var onMouseMove_1 = options.vertical
                  ? function (event) { return onScrub_1(event.clientY); }
                  : function (event) { return onScrub_1(event.clientX); };
              var onTouchStart_1 = function (event) {
                  startScrubbing_1();
                  onTouchMove_1(event);
              };
              var onTouchMove_1 = options.vertical
                  ? function (event) { return onScrub_1(event.changedTouches[0].clientY); }
                  : function (event) { return onScrub_1(event.changedTouches[0].clientX); };
              var bindEvents_1 = function () {
                  on(document, 'mousemove', onMouseMove_1);
                  on(document, 'mouseup', stopScrubbing_1);
                  on(document, 'touchmove', onTouchMove_1);
                  on(document, 'touchend', stopScrubbing_1);
              };
              var unbindEvents_1 = function () {
                  off(document, 'mousemove', onMouseMove_1);
                  off(document, 'mouseup', stopScrubbing_1);
                  off(document, 'touchmove', onTouchMove_1);
                  off(document, 'touchend', stopScrubbing_1);
              };
              var onScrub_1 = function (clientXY) {
                  cancelAnimationFrame(frame.current);
                  frame.current = requestAnimationFrame(function () {
                      if (isMounted() && ref.current) {
                          var rect = ref.current.getBoundingClientRect();
                          var pos = options.vertical ? rect.top : rect.left;
                          var length_1 = options.vertical ? rect.height : rect.width;
                          // Prevent returning 0 when element is hidden by CSS
                          if (!length_1) {
                              return;
                          }
                          var value = (clientXY - pos) / length_1;
                          if (value > 1) {
                              value = 1;
                          }
                          else if (value < 0) {
                              value = 0;
                          }
                          if (reverse_1) {
                              value = 1 - value;
                          }
                          setState({
                              value: value,
                          });
                          (options.onScrub || noop)(value);
                      }
                  });
              };
              on(ref.current, 'mousedown', onMouseDown_1);
              on(ref.current, 'touchstart', onTouchStart_1);
              return function () {
                  off(ref.current, 'mousedown', onMouseDown_1);
                  off(ref.current, 'touchstart', onTouchStart_1);
              };
          }
          else {
              return undefined;
          }
      }, [ref, options.vertical]);
      return state;
  };
  export default useSlider;
  