@htmlbricks/hb-input-range

hb-input-range

Category: inputs · Tags: inputs

Overview

hb-input-range is a Bulma-styled web component that wraps a native HTML range control (type="range"). You drive it with a single JSON schemaentry attribute: bounds come from optional params.min / params.max, and the component validates against those bounds when the field is required. It emits a setVal custom event whenever the effective value or validity changes (after deduplication).

Use it when you need a string-attribute-friendly range slider that matches the same schemaentry pattern as other hb-input-* fields in forms.

Custom element

Name	Tag
hb-input-range	<hb-input-range …></hb-input-range>

Host attributes (HTML)

Web component attributes are strings. Pass booleans as yes / no, numbers inside JSON as JSON numbers, and structured data as a JSON string on schemaentry.

Attribute	Required	Description
schemaentry	Yes	JSON describing the field (see below). If the attribute is missing, JSON parsing fails, or the value is null, nothing is rendered. A parsed object without id still shows the range, but setVal is not emitted.
show_validation	No	yes or no (default in code: no). When yes, and schemaentry.validationTip is set, an invalid value shows Bulma help is-danger with that tip.
id	No	Optional id on the host element (component typings).
style	No	Optional inline styles on the host.

schemaentry JSON

The attribute value is a serialized object aligned with FormSchemaEntry in types/webcomponent.type.d.ts (shared keys come from ../../form/types/webcomponent.type).

Property	Description
id	Required for setVal dispatches (the effect bails out without it). Also sets the native input id.
value	Optional initial numeric value. Non-numeric or missing values become undefined internally.
required	When true, the value must be set and satisfy any declared min / max (see validation).
disabled	When true, the slider is non-interactive.
readonly	Passed through to the native readonly attribute.
placeholder	Passed through to the native placeholder attribute.
validationTip	Message shown when show_validation is yes and the field is invalid.
params	Optional InputRangeParams: slider bounds and validation limits.

Bounds (params) — type InputRangeParams: optional min and/or max, each a number or numeric string. The implementation uses Object.prototype.hasOwnProperty.call(params, "min") (and similarly for "max"): a key must exist on params for the native min / max attributes and validation to use it. If a key is missing, that side is unconstrained.

The shared schema also allows other keys (for example label); this component does not render a label in its template—it renders the range input and optional invalid feedback only.

Validation

• required is false or omitted: the component treats the field as valid (valid: true in setVal).
• required is true: the value must be a defined number, and:
  • if params has a min key, value >= min (after coercion to number);
  • if params has a max key, value <= max.

Invalid state uses --bulma-danger for the danger help text. The native control’s accent-color follows Bulma tokens (see Styling).

Events

Event	detail
setVal	{ value: number | undefined; valid: boolean; id: string }

setVal is dispatched when id is present and the payload changes (value, validity, or id). Listen with addEventListener("setVal", …) in the host page or framework.

Styling

Bulma CSS variables (:host)

Documented in extra/docs.ts (styleSetup.vars):

Variable	Role
--bulma-text	Label and current value readout color.
--bulma-border	Track baseline color where Bulma maps borders to the range.
--bulma-link	Native range accent-color (thumb / filled portion). In styles/webcomponent.scss, accent-color is set to var(--bulma-link, …).
--bulma-danger	Invalid state and help is-danger when out of min / max or empty.
--bulma-success	Valid thumb accent when show_validation marks the field as valid.

Sass entry: styles/bulma.scss forwards Bulma form/shared, form/input-textarea, and form/tools, then applies the light theme on :host.

See Bulma CSS variables for how to set them on the host or ancestor.

CSS parts

Part	Description
input	The native type="range" element (class hb-input-range-native).
invalid-feedback	The p.help.is-danger node when validation feedback is shown.

The control is display: inline-block on :host, full width inside the host, with fixed height for the native range (styles/webcomponent.scss).

TypeScript

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

After npm run build:wc, generated DOM typings include hb-input-range in types/html-elements.d.ts and Svelte element typings in types/svelte-elements.d.ts.

Examples

Minimal range (0–100)

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

Required with validation message

<hb-input-range
  schemaentry='{"id":"level","required":true,"params":{"min":1,"max":10},"value":1,"validationTip":"Pick a level between 1 and 10."}'
  show_validation="yes"
></hb-input-range>

Listen for changes (vanilla JS)

const el = document.querySelector("hb-input-range");
el.addEventListener("setVal", (e) => {
  const { value, valid, id } = e.detail;
  console.log(id, value, valid);
});

Disabled slider

<hb-input-range
  schemaentry='{"id":"volume_locked","label":"Volume","params":{"min":0,"max":100},"value":65,"disabled":true}'
></hb-input-range>

Package metadata

Component name in catalog setup: hb-input-range (extra/docs.ts → componentSetup). Description and Storybook-oriented examples also live in extra/docs.ts.