@engie-group/fluid-design-system-react/lib/components/slider/NJSlider.js

Fluid Design System React

import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import React__default, { useState, useEffect } from 'react';
import { Utils } from '../../utils/util.js';
import { NJTooltip } from '../tooltip/NJTooltip.js';

const NJSlider = React__default.forwardRef(({ id, label, name, min, max, value, step, hasTooltip = false, onChange, className, rootRef: rootRef, labelRef, ...htmlProps }, forwardedRef) => {
    const [inputValue, setInputValue] = useState(value ?? min);
    const sliderRef = React__default.useRef(null);
    useEffect(() => {
        onChange?.(inputValue);
        const currentProgress = ((inputValue - min) / (max - min)) * 100;
        sliderRef.current?.style.setProperty('--nj-slider-track-position', `${currentProgress}%`);
        sliderRef.current?.style.setProperty('--nj-slider-anchor-left', `calc(${currentProgress}% + ${currentProgress / 100} * -16px + 10px)`);
    }, [inputValue, min, max]);
    const onInputChange = (e) => {
        setInputValue(+e.target.value);
    };
    const sliderClass = Utils.classNames('nj-slider', {
        ['nj-slider--disabled']: htmlProps.disabled
    }, className);
    return (jsx("div", { className: sliderClass, ref: Utils.mergeRefs([sliderRef, rootRef]), "data-tooltip": hasTooltip ? hasTooltip : undefined, children: id && label && (jsxs(Fragment, { children: [jsx("label", { htmlFor: id, ref: labelRef, children: label }), jsx("input", { ...htmlProps, ref: forwardedRef, min: min, max: max, step: step, type: "range", id: id, name: name, value: inputValue, onChange: onInputChange }), hasTooltip && (jsx(NJTooltip, { text: inputValue, displayed: true, placement: "top", children: jsx("div", { className: "nj-slider__tooltip-anchor" }) }))] })) }));
});
NJSlider.displayName = 'NJSlider';

export { NJSlider };