33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
import React, { FC, useEffect, useRef } from 'react';
|
|
import { Slider, Text } from '@fluentui/react-components';
|
|
import { SliderOnChangeData } from '@fluentui/react-slider';
|
|
import { NumberInput } from './NumberInput';
|
|
|
|
export const ValuedSlider: FC<{
|
|
value: number,
|
|
min: number,
|
|
max: number,
|
|
step?: number,
|
|
input?: boolean
|
|
onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void
|
|
}> = ({ value, min, max, step, input, onChange }) => {
|
|
const sliderRef = useRef<HTMLInputElement>(null);
|
|
useEffect(() => {
|
|
if (step && sliderRef.current && sliderRef.current.parentElement) {
|
|
if ((max - min) / step > 10)
|
|
sliderRef.current.parentElement.style.removeProperty('--fui-Slider--steps-percent');
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<div className="flex items-center">
|
|
<Slider ref={sliderRef} className="grow" style={{ minWidth: '50%' }} value={value} min={min}
|
|
max={max} step={step}
|
|
onChange={onChange} />
|
|
{input
|
|
? <NumberInput style={{ minWidth: 0 }} value={value} min={min} max={max} step={step} onChange={onChange} />
|
|
: <Text>{value}</Text>}
|
|
</div>
|
|
);
|
|
};
|