SliderField

SliderField wraps the PrimeReact Slider component for selecting a numeric value within a range. The current value is displayed below the slider.

Usage

import { CommandDialog } from '@cratis/components/CommandDialog';
import { SliderField } from '@cratis/components/CommandForm';

<CommandDialog command={MyCommand} visible={visible} onCancel={() => setVisible(false)}>
    <SliderField<MyCommand> value={c => c.volume} min={0} max={100} step={5} />
    <SliderField<MyCommand> value={c => c.experience} min={0} max={50} />
</CommandDialog>

Props

Prop	Type	Default	Description
value	(instance: TCommand) => unknown	—	Required. Accessor function that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety.
min	number	0	Minimum value.
max	number	100	Maximum value.
step	number	1	Step increment.

Behavior

• Default value is 0.
• The slider spans full width within its container.
• The selected numeric value is rendered centered beneath the slider track.