@htmlbricks/hb-range-slider
v0.71.9
Published
Dual-handle range slider mapping a min–max domain to thumb positions, with optional value bubbles and a third handle for a single marker position; emits changeRangeValues with real and percentage values on change.
Readme
hb-range-slider — range slider
Category: inputs
Tags: inputs, slider
What it does
Dual-handle range slider mapping a min–max domain to thumb positions, with optional value bubbles and a third handle for a single marker position; emits changeRangeValues with real and percentage values on change.
Custom element
hb-range-slider
Attributes (snake_case; use string values in HTML)
id,style(optional): strings.min,max(optional): numbers as strings — domain bounds.minval,maxval(optional): numbers as strings — selected range endpoints.position_value(optional): number as string — marker handle value.withbubbles(optional): boolean string — show value bubbles.
Events
changeRangeValues:{ minValue; maxValue; minPercent; maxPercent; positionPercent; positionValReal }.
Usage notes
- CSS variables:
--hb-slider-background-color. - CSS parts:
inverse,the-range,the-thumb,sign.
Minimal HTML example
<hb-range-slider min="0" max="100" minval="20" maxval="80" withbubbles="true"></hb-range-slider>