Slider

Slider is a range input for numeric settings. It shows the current value on the right which can be clicked to type in an exact number directly.

import { Slider } from "@/components/slider";

<Field name="Speed">
  <Slider
    value={data.walkspeed}
    onChange={(walkspeed) => set({ ...data, walkspeed })}
    min={1}
    max={100}
    step={1}
  />
</Field>;

Props

Prop	Type	Default	Description
`value`	`number`	—	Controlled value
`onChange`	`(value: number) => void`	—	Called with the new value on change
`min`	`number`	`0`	Minimum value
`max`	`number`	`100`	Maximum value
`step`	`number`	`1`	Step increment
`disabled`	`boolean`	`false`	Disables the slider
`showValue`	`boolean`	`true`	Whether to show the current value on the right

Notes

Clicking the value label on the right lets the user type in an exact number. It clamps to min/max on blur or when pressing Enter. Press Escape to cancel.
Use step with decimal values like 0.5 for float settings, or 1 for integers.

Slider

Props

Notes

On this page