{{#if this.showInputOnly}}
  <EuiInputPopover
    class="euiRange__popover"
    @fullWidth={{this.fullWidth}}
    @isOpen={{this.isPopoverOpen}}
    @closePopover={{this.closePopover}}
    @disableFocusTrap={{true}}
    @onPanelResize={{this.onResize}}
  >
    <:input>
      <EuiFormControlLayoutDelimited
        @isDisabled={{@disabled}}
        @fullWidth={{this.fullWidth}}
        @compressed={{this.compressed}}
        @readOnly={{@readOnly}}
        @useGroup={{or (has-block "prepend") (has-block "append")}}
      >
        <:prepend as |prependClasses|>
          {{yield prependClasses to="prepend"}}
        </:prepend>
        <:startControl as |classes|>
          <EuiRangeInput
            aria-label={{@minInputProps.ariaLabel}}
            class={{classes}}
            @digitTolerance={{this.digitTolerance}}
            @side="min"
            @min={{this.min}}
            @max={{cast-to this.upperValue to="number"}}
            @step={{this.step}}
            @value={{this.lowerValue}}
            @disabled={{@disabled}}
            @compressed={{this.compressed}}
            @onChange={{this.handleLowerInputChange}}
            @name="{{@name}}-minValue"
            @readOnly={{@readOnly}}
            @autoSize={{false}}
            @fullWidth={{this.fullWidth}}
            @isInvalid={{@isInvalid}}
            @controlOnly={{true}}
            ...attributes
            {{on "mousedown" (fn this.setPreventPopoverClose true)}}
            {{on-key "_all" this.handleInputKeyDown}}
            {{on "focus" (if this.canShowDropdown this.onInputFocus (optional @onFocus))}}
            {{on "blur" (if this.canShowDropdown this.onInputBlur (optional @onBlur))}}
            {{on "input" this.handleLowerInputChange}}
          />
          <div class="euiRange__horizontalSpacer"></div>
        </:startControl>
        <:endControl as |classes|>
          <div class="euiRange__horizontalSpacer"></div>
          <EuiRangeInput
            class={{classes}}
            aria-label={{@maxInputProps.ariaLabel}}
            @digitTolerance={{this.digitTolerance}}
            @side="max"
            @min={{cast-to this.lowerValue to="number"}}
            @max={{this.max}}
            @step={{this.step}}
            @value={{this.upperValue}}
            @disabled={{@disabled}}
            @compressed={{this.compressed}}
            @name="{{@name}}-maxValue"
            @readOnly={{@readOnly}}
            @autoSize={{false}}
            @fullWidth={{this.fullWidth}}
            @isInvalid={{@isInvalid}}
            @controlOnly={{true}}
            ...attributes
            {{on "mousedown" (fn this.setPreventPopoverClose true)}}
            {{on-key "_all" this.handleInputKeyDown}}
            {{on "focus" (if this.canShowDropdown this.onInputFocus (optional @onFocus))}}
            {{on "blur" (if this.canShowDropdown this.onInputBlur (optional @onBlur))}}
            {{on "input" this.handleUpperInputChange}}
          />
        </:endControl>
        <:append as |appendClasses|>
          {{yield appendClasses to="append"}}
        </:append>
      </EuiFormControlLayoutDelimited>
    </:input>
    <:content>
      <EuiRangeWrapper
        class="euiDualRange"
        @fullWidth={{this.fullWidth}}
        @compressed={{this.compressed}}
      >
        {{#if this.showLabels}}
          <EuiRangeLabel @side="min" @disabled={{@disabled}}>
            {{this.min}}
          </EuiRangeLabel>
        {{/if}}
        <EuiRangeTrack
          aria-hidden={{if (eq this.showInput true) "true" "false"}}
          @compressed={{this.compressed}}
          @disabled={{@disabled}}
          @max={{this.max}}
          @min={{this.min}}
          @step={{this.step}}
          @showTicks={{this.showTicks}}
          @tickInterval={{@tickInterval}}
          @ticks={{@ticks}}
          @levels={{this.levels}}
          @onChange={{this.handleSliderChange}}
          @value={{@value}}
        >
          {{#if (and this.showRange this.isValid)}}
            <EuiRangeHighlight
              @compressed={{this.compressed}}
              @hasFocus={{this.hasFocus}}
              @showTicks={{this.showTicks}}
              @min={{cast-to this.min to="number"}}
              @max={{cast-to this.max to="number"}}
              @lowerValue={{cast-to this.lowerValue to="number"}}
              @upperValue={{cast-to this.upperValue to="number"}}
            />
          {{/if}}
          <EuiRangeSlider
            class="euiDualRange__slider"
            aria-hidden="true"
            @id={{this.id}}
            @name={{@name}}
            @min={{this.min}}
            @max={{this.max}}
            @step={{this.step}}
            @disabled={{@disabled}}
            @compressed={{this.compressed}}
            @onChange={{this.handleSliderChange}}
            @showTicks={{this.showTicks}}
            @hasFocus={{this.hasFocus}}
            tabindex="-1"
            @showRange={{this.showRange}}
            ...attributes
            {{did-insert this.didInsertRangeSlider}}
            {{on "mousedown" (fn this.setPreventPopoverClose true)}}
            {{on "focus" (optional @onFocus)}}
            {{on "blur" (optional @onBlur)}}
            {{on "input" this.handleSliderChange}}
          />
          {{#if this.rangeSliderRefAvailable}}
            <EuiRangeThumb
              @min={{this.min}}
              @max={{cast-to this.upperValue to="number"}}
              @value={{this.lowerValue}}
              @disabled={{@disabled}}
              @showTicks={{this.showTicks}}
              @showInput={{not this.showInput}}
              aria-describedby={{@ariaDescribedby}}
              aria-label={{@ariaLabel}}
              {{simple-style this.calculateLowerValueThumbPositionStyle}}
              {{on "focus" this.onThumbFocus}}
              {{on "blur" this.onThumbBlur}}
              {{on-key "_all" this.handleLowerKeyDown}}
            />
            <EuiRangeThumb
              @min={{cast-to this.lowerValue to="number"}}
              @max={{this.max}}
              @value={{this.upperValue}}
              @disabled={{@disabled}}
              @showTicks={{this.showTicks}}
              @showInput={{not this.showInput}}
              aria-describedby={{@ariaDescribedby}}
              aria-label={{@ariaLabel}}
              {{simple-style this.calculateUpperValueThumbPositionStyle}}
              {{on "focus" this.onThumbFocus}}
              {{on "blur" this.onThumbBlur}}
              {{on-key "_all" this.handleUpperKeyDown}}
            />
          {{/if}}
        </EuiRangeTrack>
        {{#if this.showLabels}}
          <EuiRangeLabel @disabled={{@disabled}}>
            {{this.max}}
          </EuiRangeLabel>
        {{/if}}
      </EuiRangeWrapper>
    </:content>
  </EuiInputPopover>
{{else}}
  <EuiRangeWrapper
    class="euiDualRange"
    @fullWidth={{this.fullWidth}}
    @compressed={{this.compressed}}
  >
    {{#if this.showInput}}
      <EuiRangeInput
        @digitTolerance={{this.digitTolerance}}
        aria-label={{@minInputProps.ariaLabel}}
        @side="min"
        @min={{this.min}}
        @max={{cast-to this.upperValue to="number"}}
        @step={{this.step}}
        @value={{this.lowerValue}}
        @disabled={{@disabled}}
        @compressed={{this.compressed}}
        @onChange={{this.handleLowerInputChange}}
        @name="{{@name}}-minValue"
        @readOnly={{@readOnly}}
        @fullWidth={{this.fullWidth}}
        @isInvalid={{@isInvalid}}
        @controlOnly={{true}}
        ...attributes
        {{on-key "_all" this.handleInputKeyDown}}
        {{on "focus" (optional @onFocus)}}
        {{on "blur" (optional @onBlur)}}
        {{on "input" this.handleLowerInputChange}}
      />
      <div class="euiRange__horizontalSpacer"></div>
    {{/if}}
    {{#if this.showLabels}}
      <EuiRangeLabel @side="min" @disabled={{@disabled}}>
        {{this.min}}
      </EuiRangeLabel>
    {{/if}}
    <EuiRangeTrack
      aria-hidden={{if (eq this.showInput true) "true" "false"}}
      @compressed={{this.compressed}}
      @disabled={{@disabled}}
      @max={{this.max}}
      @min={{this.min}}
      @step={{this.step}}
      @showTicks={{this.showTicks}}
      @tickInterval={{@tickInterval}}
      @ticks={{@ticks}}
      @levels={{this.levels}}
      @onChange={{this.handleSliderChange}}
      @value={{@value}}
    >
      {{#if (and this.showRange this.isValid)}}
        <EuiRangeHighlight
          @compressed={{this.compressed}}
          @hasFocus={{this.hasFocus}}
          @showTicks={{this.showTicks}}
          @min={{cast-to this.min to="number"}}
          @max={{cast-to this.max to="number"}}
          @lowerValue={{cast-to this.lowerValue to="number"}}
          @upperValue={{cast-to this.upperValue to="number"}}
        />
      {{/if}}
      <EuiRangeSlider
        class="euiDualRange__slider"
        aria-hidden="true"
        @id={{this.id}}
        @name={{@name}}
        @min={{this.min}}
        @max={{this.max}}
        @step={{this.step}}
        @disabled={{@disabled}}
        @compressed={{this.compressed}}
        @onChange={{this.handleSliderChange}}
        @showTicks={{this.showTicks}}
        @hasFocus={{this.hasFocus}}
        tabindex="-1"
        @showRange={{this.showRange}}
        ...attributes
        {{did-insert this.didInsertRangeSlider}}
        {{on "mousedown" (fn this.setPreventPopoverClose true)}}
        {{on "focus" (optional @onFocus)}}
        {{on "blur" (optional @onBlur)}}
        {{on "input" this.handleSliderChange}}
      />
      {{#if this.rangeSliderRefAvailable}}
        <EuiRangeThumb
          @min={{this.min}}
          @max={{cast-to this.upperValue to="number"}}
          @value={{this.lowerValue}}
          @disabled={{@disabled}}
          @showTicks={{this.showTicks}}
          @showInput={{not this.showInput}}
          aria-describedby={{@ariaDescribedby}}
          aria-label={{@ariaLabel}}
          {{simple-style this.calculateLowerValueThumbPositionStyle}}
          {{on "focus" this.onThumbFocus}}
          {{on "blur" this.onThumbBlur}}
          {{on "click" this.handleLowerKeyDown}}
        />
        <EuiRangeThumb
          @min={{cast-to this.lowerValue to="number"}}
          @max={{this.max}}
          @value={{this.upperValue}}
          @disabled={{@disabled}}
          @showTicks={{this.showTicks}}
          @showInput={{not this.showInput}}
          aria-describedby={{@ariaDescribedby}}
          aria-label={{@ariaLabel}}
          {{simple-style this.calculateUpperValueThumbPositionStyle}}
          {{on "focus" this.onThumbFocus}}
          {{on "blur" this.onThumbBlur}}
          {{on "keydown" this.handleUpperKeyDown}}
        />
      {{/if}}
    </EuiRangeTrack>
    {{#if this.showLabels}}
      <EuiRangeLabel @disabled={{@disabled}}>
        {{this.max}}
      </EuiRangeLabel>
    {{/if}}
    {{#if this.showInput}}
      <div class="euiRange__horizontalSpacer"></div>
      {{! maxinput }}
      <EuiRangeInput
        aria-label={{@maxInputProps.ariaLabel}}
        @digitTolerance={{this.digitTolerance}}
        @side="max"
        @min={{cast-to this.lowerValue to="number"}}
        @max={{this.max}}
        @step={{this.step}}
        @value={{this.upperValue}}
        @disabled={{@disabled}}
        @compressed={{this.compressed}}
        @name="{{@name}}-maxValue"
        @readOnly={{@readOnly}}
        @fullWidth={{this.fullWidth}}
        @isInvalid={{@isInvalid}}
        @controlOnly={{this.showInputOnly}}
        ...attributes
        {{on-key "_all" this.handleInputKeyDown}}
        {{on "focus" (optional @onFocus)}}
        {{on "blur" (optional @onBlur)}}
        {{on "input" this.handleUpperInputChange}}
      />
    {{/if}}
  </EuiRangeWrapper>
{{/if}}