<div class="filter-range" ...attributes>
    <div class="filter-range-inputs">
        <div class="filter-range-input-group">
            <label class="filter-range-label">{{or @filter.minLabel "Min"}}</label>
            <Input 
                @type="number" 
                @value={{this.minValue}} 
                min={{or @filter.min 0}} 
                max={{or @filter.max 100}} 
                step={{or @filter.step 1}}
                {{on "input" this.onMinChange}} 
                class="form-input form-input-sm" 
            />
        </div>
        <div class="filter-range-separator">-</div>
        <div class="filter-range-input-group">
            <label class="filter-range-label">{{or @filter.maxLabel "Max"}}</label>
            <Input 
                @type="number" 
                @value={{this.maxValue}} 
                min={{or @filter.min 0}} 
                max={{or @filter.max 100}} 
                step={{or @filter.step 1}}
                {{on "input" this.onMaxChange}} 
                class="form-input form-input-sm" 
            />
        </div>
    </div>
    <div class="filter-range-sliders">
        <input 
            type="range" 
            value={{this.minValue}} 
            min={{or @filter.min 0}} 
            max={{or @filter.max 100}} 
            step={{or @filter.step 1}}
            {{on "input" this.onMinChange}} 
            class="filter-range-slider filter-range-slider-min" 
        />
        <input 
            type="range" 
            value={{this.maxValue}} 
            min={{or @filter.min 0}} 
            max={{or @filter.max 100}} 
            step={{or @filter.step 1}}
            {{on "input" this.onMaxChange}} 
            class="filter-range-slider filter-range-slider-max" 
        />
    </div>
    <button type="button" class="clear-button" alt="Clear" {{on "click" this.clear}}>
        <FaIcon @icon="times" />
    </button>
</div>
