<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

<t t-name="html_builder.BuilderRange">
    <BuilderComponent>
        <div
            t-attf-class="o-hb-range d-flex flex-row flex-nowrap align-items-center {{ props.withNumberInput ? 'me-2' : '' }}"
            t-att-data-action-id="info.actionId"
            t-att-data-action-param="info.actionParam"
            t-att-data-action-value="info.actionValue"
            t-att-data-class-action="info.classAction"
            t-att-data-style-action="info.styleAction"
            t-att-data-style-action-value="info.styleActionValue"
            t-att-data-attribute-action="info.attributeAction"
            t-att-data-attribute-action-value="info.attributeActionValue">
            <input
                type="range"
                class="o-hb-rangeInput"
                t-ref="inputRefRange"
                t-att-class="className"
                t-att-min="props.min"
                t-att-max="props.max"
                t-att-step="props.step"
                t-att-value="inputValueRange"
                t-on-change="onChangeRange"
                t-on-input="onInputRange"
                t-on-keydown="onKeydownRange"/>
            <output t-if="props.displayRangeValue" t-out="displayValueRange" class="ms-1" />
        </div>
        <BuilderNumberInputBase
            t-if="props.withNumberInput"
            t-props="textInputBaseProps"
            inputRef="inputRefNumber"
            value="displayValueNumber"
            classes="'o-hb-input-field-number justify-content-end'"
            inputClasses="'o-hb-input-number text-end'"
            commit="commit"
            preview="preview"
            clampValue.bind="clampValue"
            onKeydown.bind="onKeydownNumber"
            selectTextOnFocus="true"
            min="props.min"
            max="props.max"
            step="props.step"
        >
            <span class="o-hb-input-field-unit" t-out="props.unit"/>
        </BuilderNumberInputBase>
    </BuilderComponent>
</t>

</templates>
