@mantine/core/esm/components/Slider/Track/Track.mjs

React components library focused on usability, accessibility and developer experience

"use client";
import { Box } from "../../../core/Box/Box.mjs";
import { useSliderContext } from "../Slider.context.mjs";
import { Marks } from "../Marks/Marks.mjs";
import { jsx, jsxs } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/Slider/Track/Track.tsx
function Track({ filled, children, offset, disabled, marksOffset, inverted, containerProps, ...others }) {
	const { getStyles } = useSliderContext();
	return /* @__PURE__ */ jsx(Box, {
		...getStyles("trackContainer"),
		mod: { disabled },
		...containerProps,
		children: /* @__PURE__ */ jsxs(Box, {
			...getStyles("track"),
			mod: {
				inverted,
				disabled
			},
			children: [
				/* @__PURE__ */ jsx(Box, {
					mod: {
						inverted,
						disabled
					},
					__vars: {
						"--slider-bar-width": `calc(${filled}% + 2 * var(--slider-size))`,
						"--slider-bar-offset": `calc(${offset}% - var(--slider-size))`
					},
					...getStyles("bar")
				}),
				children,
				/* @__PURE__ */ jsx(Marks, {
					...others,
					offset: marksOffset,
					disabled,
					inverted
				})
			]
		})
	});
}
Track.displayName = "@mantine/core/SliderTrack";
//#endregion
export { Track };

//# sourceMappingURL=Track.mjs.map