@hitachivantara/uikit-react-core/dist/Slider/SliderInput/SliderInput.js

UI Kit Core React components.

import { setId } from "../../utils/setId.js";
import { HvInput } from "../../Input/Input.js";
import { knobsValuesToString, stringValuesToKnobs } from "../utils.js";
import { useClasses } from "./SliderInput.styles.js";
import { Fragment, useEffect, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/Slider/SliderInput/SliderInput.tsx
var HvSliderInput = ({ classes: classesProp, className, id, label, status, values: valuesProp = [], inputProps = [], readOnly = false, disabled = false, markDigits = 0, onChange, ...others }) => {
	const { classes, cx } = useClasses(classesProp);
	const [inputValues, setInputValues] = useState(knobsValuesToString(valuesProp, markDigits));
	const handleChange = (index) => {
		if (disabled) return;
		onChange?.(stringValuesToKnobs(inputValues), index);
	};
	useEffect(() => {
		setInputValues(knobsValuesToString(valuesProp, markDigits));
	}, [markDigits, valuesProp]);
	return /* @__PURE__ */ jsx("div", {
		className: cx(classes.root, className),
		...others,
		children: inputValues.map((value, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index !== 0 && /* @__PURE__ */ jsx("span", { children: "—" }), /* @__PURE__ */ jsx(HvInput, {
			id: setId(id, index),
			"aria-label": `${label}-${index}`,
			className: classes.input,
			disabled,
			value: Number.isNaN(value) || value == null ? "" : value.toString(),
			onEnter: () => handleChange(index),
			onBlur: () => handleChange(index),
			onChange: (_, inputValue) => {
				const newValues = [...inputValues];
				newValues[index] = inputValue;
				setInputValues(newValues);
			},
			status: status?.[index] || "standBy",
			readOnly,
			disableClear: true,
			...inputProps[index]
		})] }, setId(id, index)))
	});
};
//#endregion
export { HvSliderInput };