@grafana/ui/dist/esm/components/Slider/RangeSlider.mjs

Grafana Components Library

import { jsx, jsxs } from 'react/jsx-runtime';
import { cx } from '@emotion/css';
import { Global } from '@emotion/react';
import SliderComponent from 'rc-slider';
import { useCallback } from 'react';
import { t } from '@grafana/i18n';
import { useStyles2 } from '../../themes/ThemeContext.mjs';
import HandleTooltip from './HandleTooltip.mjs';
import { getStyles } from './styles.mjs';

"use strict";
const RangeSlider = ({
  min,
  max,
  onChange,
  onAfterChange,
  orientation = "horizontal",
  reverse,
  step,
  formatTooltipResult,
  value,
  tooltipAlwaysVisible = true
}) => {
  const handleChange = useCallback(
    (v) => {
      const value2 = typeof v === "number" ? [v, v] : v;
      onChange == null ? void 0 : onChange(value2);
    },
    [onChange]
  );
  const handleChangeComplete = useCallback(
    (v) => {
      const value2 = typeof v === "number" ? [v, v] : v;
      onAfterChange == null ? void 0 : onAfterChange(value2);
    },
    [onAfterChange]
  );
  const isHorizontal = orientation === "horizontal";
  const styles = useStyles2(getStyles, isHorizontal);
  const dragHandleAriaLabel = t("grafana-ui.range-slider.drag-handle-aria-label", "Use arrow keys to change the value");
  const tipHandleRender = (node, handleProps) => {
    return /* @__PURE__ */ jsx(
      HandleTooltip,
      {
        value: handleProps.value,
        visible: tooltipAlwaysVisible || handleProps.dragging,
        tipFormatter: formatTooltipResult ? () => formatTooltipResult(handleProps.value) : void 0,
        placement: isHorizontal ? "top" : "right",
        children: node
      }
    );
  };
  return /* @__PURE__ */ jsxs("div", { className: cx(styles.container, styles.slider), children: [
    /* @__PURE__ */ jsx(Global, { styles: styles.tooltip }),
    /* @__PURE__ */ jsx(
      SliderComponent,
      {
        min,
        max,
        step,
        defaultValue: value,
        range: true,
        onChange: handleChange,
        onChangeComplete: handleChangeComplete,
        vertical: !isHorizontal,
        reverse,
        handleRender: tipHandleRender,
        ariaLabelForHandle: dragHandleAriaLabel
      }
    )
  ] });
};
RangeSlider.displayName = "RangeSlider";

export { RangeSlider };
//# sourceMappingURL=RangeSlider.mjs.map