@htmlbricks/hb-input-range

hb-input-range — input-range

Category: inputs
Tags: inputs

What it does

Range slider (type="range"). Optional InputRangeParams: min / max as numbers or numeric strings; each attribute is applied only if the corresponding key exists on params (same pattern as hb-input-number). Dispatches setVal { value, valid, id } (numeric value may be undefined) and shows validationTip as Bulma help is-danger when show_validation is yes and 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?, optional params as InputRangeParams)
• show_validation — optional "yes" | "no"

schemaentry.params (InputRangeParams)

Key	Type	Description
min	number | string	Native min + validation when the key exists.
max	number | string	Native max + validation when the key exists.

Typings

types/webcomponent.type.d.ts — InputRangeParams, FormSchemaEntry, Component, Events.

Events

• setVal — { value: number | undefined; 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>