<baht-range>

Range slider. Controlled.

Basic

<baht-range value="40" label="Volume"></baht-range>

Stepped

show-value defaults on; show-value="false" turns the readout off.

<baht-range value="50" min="0" max="200" step="25" label="Budget"></baht-range>

As a form field

In a form schema, type: 'range' renders this element in field mode: field label / help / error, bounds from min / max / step (default 0 / 100 / 1), and baht-input with a number, debounced while sliding and sent at once on release. Untouched (null) parks the thumb at min and reads “—”. The engine and bank20baht-validator enforce the bounds (defaults included) and the step grid counted from min (“Use steps of 5”).

{ "order": 4, "type": "range", "key": "budget", "label": "Monthly budget", "min": 0, "max": 20000, "step": 500 }

Props

Name	Type	Default	Description
`value`	`number`	`0`	Current value
`min`	`number`	`0`	Minimum
`max`	`number`	`100`	Maximum
`step`	`number`	`1`	Step
`label`	`string`	`''`	Label above the slider
`show-value`	`boolean`	`true`	Show the numeric bubble
`field`JS	`FieldDescriptor`	`—`
`disabled`	`boolean`	`false`	Disable
`readonly`	`boolean`	`false`
`required`	`boolean`	`false`
`show-optional`	`boolean`	`false`	Append the localized "(optional)" marker to the label when not required (set by <baht-form show-optional>).
`error`JS	`string \| null`	`null`
`debounce`	`number \| undefined`	`—`	Debounce for typed edits (ms); unset = BahtFieldBase.defaultDebounce.

Events

Event	detail	Description
`baht-change`	`{ value }`	Value changed
`baht-input`	CustomEvent	Field mode: the slider moved. `detail: { key, value }`.
`name`	CustomEvent