MantineSlider#

@palmyralabs/rt-forms-mantine · form/MantineSlider.tsx

Overview#

Single-thumb horizontal slider.

Props — `ISliderDefinition & SliderProps`#

Common field props plus:

Prop	Type	Purpose
`labelName`	`string?`	Label rendered in the thumb tooltip

Plus Mantine SliderProps (min, max, step, marks, color, …).

Ref — `ISliderField`#

interface ISliderField {
  focus(): void;
  getValue(): number;
  setValue(v: number): void;
  isValid(): boolean;
}

Example#

<MantineSlider
  attribute="discountPercent"
  label="Discount"
  min={0} max={100} step={5}
  marks={[{ value: 25, label: '25%' }, { value: 50, label: '50%' }, { value: 75, label: '75%' }]}
/>