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.