@htmlbricks/hb-input-range

hb-input-range — input-range

Category: inputs
Tags: inputs

What it does

Range slider (type="range") whose bounds come from schemaentry.params.min and/or max when those keys exist. Parses stringified schemaentry when needed and enforces required / min / max on the numeric value. Dispatches setVal with { value, valid, id } and shows validationTip as Bulma help is-danger when show_validation is yes and the field is invalid.

Styling (Bulma)

Shadow bundle: form/shared, form/input-textarea, form/tools. The native range uses accent-color mapped to Bulma link / success / danger via --bulma-* on :host (not the text input class, which does not suit range controls).

Custom element

hb-input-range

Attributes (snake_case; use string values in HTML)

• id — optional string
• style — optional string
• schemaentry — required string (JSON: id, label?, required?, value? (number), validationTip?, params.min / params.max, …)
• show_validation — optional "yes" | "no"

Events

• setVal — { value: number; valid: boolean; id: string }

Usage notes

CSS parts: input, invalid-feedback.

Minimal HTML example

<hb-input-range
  schemaentry="{&quot;id&quot;:&quot;volume&quot;,&quot;required&quot;:true,&quot;params&quot;:{&quot;min&quot;:0,&quot;max&quot;:100},&quot;value&quot;:50}"
  show_validation="no"
></hb-input-range>