/** @license MIT | @cube-dev/ui-kit v0.135.1 | Cube Dev Team */
import { SliderTrackContainerElement } from "./elements.js";
import { useMemo } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/components/fields/Slider/SliderTrack.tsx
function SliderTrack(props) {
	const { isDisabled, state, orientation = "horizontal", styles } = props;
	const selectedTrack = [state.getThumbPercent(0), state.getThumbPercent(1)];
	const showRangeTrack = !Number.isNaN(selectedTrack[1]);
	return /* @__PURE__ */ jsx(SliderTrackContainerElement, {
		mods: useMemo(() => ({
			disabled: isDisabled,
			horizontal: orientation === "horizontal",
			range: showRangeTrack
		}), [isDisabled, showRangeTrack]),
		styles,
		style: showRangeTrack ? {
			"--slider-range-start": `${selectedTrack[0] * 100}%`,
			"--slider-range-end": `${selectedTrack[1] * 100}%`
		} : { "--slider-value": `${selectedTrack[0] * 100}%` }
	});
}

//#endregion
export { SliderTrack };
//# sourceMappingURL=SliderTrack.js.map