// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`OuiDualRange allows value prop to accept empty strings 1`] = `
<div
  class="ouiRangeWrapper ouiDualRange"
>
  <div
    aria-hidden="false"
    class="ouiRangeTrack"
  >
    <input
      aria-hidden="true"
      class="ouiRangeSlider ouiRangeSlider--hasRange ouiDualRange__slider"
      id="generated-id"
      max="100"
      min="0"
      step="1"
      tabindex="-1"
      type="range"
    />
  </div>
</div>
`;

exports[`OuiDualRange allows value prop to accept numbers 1`] = `
<div
  class="ouiRangeWrapper ouiDualRange"
>
  <div
    aria-hidden="false"
    class="ouiRangeTrack"
  >
    <input
      aria-hidden="true"
      class="ouiRangeSlider ouiRangeSlider--hasRange ouiDualRange__slider"
      id="generated-id"
      max="100"
      min="0"
      step="1"
      tabindex="-1"
      type="range"
    />
    <div
      class="ouiRangeHighlight"
    >
      <div
        class="ouiRangeHighlight__progress"
        style="margin-left:1%;width:7.000000000000001%"
      />
    </div>
  </div>
</div>
`;

exports[`OuiDualRange input props can be applied to min and max inputs 1`] = `
<div
  class="ouiRangeWrapper ouiDualRange"
>
  <div
    class="ouiFormControlLayout"
  >
    <div
      class="ouiFormControlLayout__childrenWrapper"
    >
      <input
        aria-label="Min value"
        class="ouiFieldNumber ouiRangeInput ouiRangeInput--min"
        max="8"
        min="1"
        name="name-minValue"
        step="1"
        style="width:3.6em"
        type="number"
        value="1"
      />
    </div>
  </div>
  <div
    class="ouiRange__horizontalSpacer"
  />
  <div
    aria-hidden="true"
    class="ouiRangeTrack"
  >
    <input
      aria-hidden="true"
      class="ouiRangeSlider ouiRangeSlider--hasRange ouiDualRange__slider"
      id="id"
      max="10"
      min="1"
      name="name"
      step="1"
      tabindex="-1"
      type="range"
    />
    <div
      class="ouiRangeHighlight"
    >
      <div
        class="ouiRangeHighlight__progress"
        style="margin-left:0%;width:77.77777777777779%"
      />
    </div>
  </div>
  <div
    class="ouiRange__horizontalSpacer"
  />
  <div
    class="ouiFormControlLayout"
  >
    <div
      class="ouiFormControlLayout__childrenWrapper"
    >
      <input
        aria-label="Max value"
        class="ouiFieldNumber ouiRangeInput ouiRangeInput--max"
        max="10"
        min="1"
        name="name-maxValue"
        step="1"
        style="width:3.6em"
        type="number"
        value="8"
      />
    </div>
  </div>
</div>
`;

exports[`OuiDualRange is rendered 1`] = `
<div
  class="ouiRangeWrapper ouiDualRange testClass1 testClass2"
>
  <div
    aria-hidden="false"
    class="ouiRangeTrack"
  >
    <input
      aria-hidden="true"
      aria-label="aria-label"
      class="ouiRangeSlider ouiRangeSlider--hasRange ouiDualRange__slider"
      data-test-subj="test subject string"
      id="id"
      max="100"
      min="0"
      name="name"
      step="1"
      tabindex="-1"
      type="range"
    />
    <div
      class="ouiRangeHighlight"
    >
      <div
        class="ouiRangeHighlight__progress"
        style="margin-left:1%;width:7.000000000000001%"
      />
    </div>
  </div>
</div>
`;

exports[`OuiDualRange props compressed should render 1`] = `
<div
  class="ouiRangeWrapper ouiRangeWrapper--compressed ouiDualRange"
>
  <div
    aria-hidden="false"
    class="ouiRangeTrack ouiRangeTrack--compressed"
  >
    <input
      aria-hidden="true"
      class="ouiRangeSlider ouiRangeSlider--hasRange ouiRangeSlider--compressed ouiDualRange__slider"
      id="generated-id"
      max="100"
      min="0"
      step="1"
      tabindex="-1"
      type="range"
    />
    <div
      class="ouiRangeHighlight ouiRangeHighlight--compressed"
    >
      <div
        class="ouiRangeHighlight__progress"
        style="margin-left:1%;width:7.000000000000001%"
      />
    </div>
  </div>
</div>
`;

exports[`OuiDualRange props custom ticks should render 1`] = `
<div
  class="ouiRangeWrapper ouiDualRange"
>
  <div
    aria-hidden="false"
    class="ouiRangeTrack ouiRangeTrack--hasTicks"
  >
    <div
      class="ouiRangeTicks ouiRangeTicks--isCustom"
    >
      <button
        class="ouiRangeTick ouiRangeTick--isCustom"
        style="left:calc(-Infinity% + 8px)"
        tabindex="-1"
        title="20kb"
        type="button"
        value="20"
      >
        20kb
      </button>
      <button
        class="ouiRangeTick ouiRangeTick--isCustom ouiRangeTick--isMax ouiRangeTick--hasTickMark"
        style="right:0%;margin-right:-1.25em"
        tabindex="-1"
        title="100kb"
        type="button"
        value="100"
      >
        <span
          aria-hidden="true"
          class="ouiRangeTick__pseudo"
          style="margin-right:calc(1.25em + 4px)"
        />
        100kb
      </button>
    </div>
    <input
      aria-hidden="true"
      class="ouiRangeSlider ouiRangeSlider--hasTicks ouiRangeSlider--hasRange ouiDualRange__slider"
      id="generated-id"
      max="100"
      min="0"
      step="1"
      tabindex="-1"
      type="range"
    />
    <div
      class="ouiRangeHighlight ouiRangeHighlight--hasTicks"
    >
      <div
        class="ouiRangeHighlight__progress"
        style="margin-left:20%;width:80%"
      />
    </div>
  </div>
</div>
`;

exports[`OuiDualRange props disabled should render 1`] = `
<div
  class="ouiRangeWrapper ouiDualRange"
>
  <div
    aria-hidden="false"
    class="ouiRangeTrack ouiRangeTrack--disabled"
  >
    <input
      aria-hidden="true"
      class="ouiRangeSlider ouiRangeSlider--hasRange ouiDualRange__slider"
      disabled=""
      id="generated-id"
      max="100"
      min="0"
      step="1"
      tabindex="-1"
      type="range"
    />
    <div
      class="ouiRangeHighlight"
    >
      <div
        class="ouiRangeHighlight__progress"
        style="margin-left:1%;width:7.000000000000001%"
      />
    </div>
  </div>
</div>
`;

exports[`OuiDualRange props fullWidth should render 1`] = `
<div
  class="ouiRangeWrapper ouiRangeWrapper--fullWidth ouiDualRange"
>
  <div
    aria-hidden="false"
    class="ouiRangeTrack"
  >
    <input
      aria-hidden="true"
      class="ouiRangeSlider ouiRangeSlider--hasRange ouiDualRange__slider"
      id="generated-id"
      max="100"
      min="0"
      step="1"
      tabindex="-1"
      type="range"
    />
    <div
      class="ouiRangeHighlight"
    >
      <div
        class="ouiRangeHighlight__progress"
        style="margin-left:1%;width:7.000000000000001%"
      />
    </div>
  </div>
</div>
`;

exports[`OuiDualRange props inputs should render 1`] = `
<div
  class="ouiRangeWrapper ouiDualRange testClass1 testClass2"
>
  <div
    class="ouiFormControlLayout"
  >
    <div
      class="ouiFormControlLayout__childrenWrapper"
    >
      <input
        aria-label="aria-label"
        class="ouiFieldNumber ouiRangeInput ouiRangeInput--min"
        max="8"
        min="0"
        name="name-minValue"
        step="1"
        style="width:4.4em"
        type="number"
        value="1"
      />
    </div>
  </div>
  <div
    class="ouiRange__horizontalSpacer"
  />
  <div
    aria-hidden="true"
    class="ouiRangeTrack"
  >
    <input
      aria-hidden="true"
      aria-label="aria-label"
      class="ouiRangeSlider ouiRangeSlider--hasRange ouiDualRange__slider"
      data-test-subj="test subject string"
      id="id"
      max="100"
      min="0"
      name="name"
      step="1"
      tabindex="-1"
      type="range"
    />
    <div
      class="ouiRangeHighlight"
    >
      <div
        class="ouiRangeHighlight__progress"
        style="margin-left:1%;width:7.000000000000001%"
      />
    </div>
  </div>
  <div
    class="ouiRange__horizontalSpacer"
  />
  <div
    class="ouiFormControlLayout"
  >
    <div
      class="ouiFormControlLayout__childrenWrapper"
    >
      <input
        aria-label="aria-label"
        class="ouiFieldNumber ouiRangeInput ouiRangeInput--max"
        max="100"
        min="1"
        name="name-maxValue"
        step="1"
        style="width:4.4em"
        type="number"
        value="8"
      />
    </div>
  </div>
</div>
`;

exports[`OuiDualRange props isDraggable should render 1`] = `
<div
  class="ouiRangeWrapper ouiDualRange"
>
  <div
    aria-hidden="false"
    class="ouiRangeTrack"
  >
    <input
      aria-hidden="true"
      class="ouiRangeSlider ouiRangeSlider--hasRange ouiDualRange__slider"
      id="generated-id"
      max="100"
      min="0"
      step="1"
      tabindex="-1"
      type="range"
    />
    <div
      class="ouiRangeHighlight"
    >
      <div
        class="ouiRangeHighlight__progress"
        style="margin-left:1%;width:7.000000000000001%"
      />
    </div>
  </div>
</div>
`;

exports[`OuiDualRange props labels should render 1`] = `
<div
  class="ouiRangeWrapper ouiDualRange"
>
  <label
    class="ouiRangeLabel ouiRangeLabel--min"
  >
    0
  </label>
  <div
    aria-hidden="false"
    class="ouiRangeTrack"
  >
    <input
      aria-hidden="true"
      class="ouiRangeSlider ouiRangeSlider--hasRange ouiDualRange__slider"
      id="generated-id"
      max="100"
      min="0"
      step="1"
      tabindex="-1"
      type="range"
    />
    <div
      class="ouiRangeHighlight"
    >
      <div
        class="ouiRangeHighlight__progress"
        style="margin-left:1%;width:7.000000000000001%"
      />
    </div>
  </div>
  <label
    class="ouiRangeLabel ouiRangeLabel--max"
  >
    100
  </label>
</div>
`;

exports[`OuiDualRange props levels should render 1`] = `
<div
  class="ouiRangeWrapper ouiDualRange"
>
  <div
    aria-hidden="false"
    class="ouiRangeTrack ouiRangeTrack--hasLevels"
  >
    <div
      class="ouiRangeLevels"
    >
      <span
        class="ouiRangeLevel ouiRangeLevel--danger"
        style="width:20%"
      />
      <span
        class="ouiRangeLevel ouiRangeLevel--success"
        style="width:80%"
      />
    </div>
    <input
      aria-hidden="true"
      class="ouiRangeSlider ouiRangeSlider--hasRange ouiDualRange__slider"
      id="generated-id"
      max="100"
      min="0"
      step="1"
      tabindex="-1"
      type="range"
    />
    <div
      class="ouiRangeHighlight"
    >
      <div
        class="ouiRangeHighlight__progress"
        style="margin-left:1%;width:7.000000000000001%"
      />
    </div>
  </div>
</div>
`;

exports[`OuiDualRange props range should render 1`] = `
<div
  class="ouiRangeWrapper ouiDualRange"
>
  <div
    aria-hidden="false"
    class="ouiRangeTrack"
  >
    <input
      aria-hidden="true"
      class="ouiRangeSlider ouiRangeSlider--hasRange ouiDualRange__slider"
      id="generated-id"
      max="100"
      min="0"
      step="1"
      tabindex="-1"
      type="range"
    />
    <div
      class="ouiRangeHighlight"
    >
      <div
        class="ouiRangeHighlight__progress"
        style="margin-left:1%;width:7.000000000000001%"
      />
    </div>
  </div>
</div>
`;

exports[`OuiDualRange props slider should display in popover 1`] = `
<div
  class="ouiPopover ouiPopover--anchorDownLeft ouiPopover--displayBlock ouiInputPopover ouiRange__popover"
>
  <div
    class="ouiPopover__anchor"
  >
    <div>
      <div
        class="ouiFormControlLayout ouiFormControlLayoutDelimited"
      >
        <div
          class="ouiFormControlLayout__childrenWrapper"
        >
          <input
            aria-label="aria-label"
            class="ouiFieldNumber ouiFormControlLayoutDelimited__input"
            max="8"
            min="0"
            name="name-minValue"
            step="1"
            type="number"
            value="1"
          />
          <div
            class="ouiText ouiText--small ouiFormControlLayoutDelimited__delimeter"
          >
            <div
              class="ouiTextColor ouiTextColor--subdued"
            >
              →
            </div>
          </div>
          <input
            aria-label="aria-label"
            class="ouiFieldNumber ouiFormControlLayoutDelimited__input"
            max="100"
            min="1"
            name="name-maxValue"
            step="1"
            type="number"
            value="8"
          />
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`OuiDualRange props ticks should render 1`] = `
<div
  class="ouiRangeWrapper ouiDualRange"
>
  <div
    aria-hidden="false"
    class="ouiRangeTrack ouiRangeTrack--hasTicks"
  >
    <div
      class="ouiRangeTicks"
    >
      <button
        class="ouiRangeTick"
        style="left:calc(NaN% + 8px);max-width:16.666666666666664%"
        tabindex="-1"
        type="button"
        value="0"
      >
        0
      </button>
      <button
        class="ouiRangeTick"
        style="left:calc(-Infinity% + 8px);max-width:16.666666666666664%"
        tabindex="-1"
        type="button"
        value="20"
      >
        20
      </button>
      <button
        class="ouiRangeTick"
        style="left:calc(-Infinity% + 8px);max-width:16.666666666666664%"
        tabindex="-1"
        type="button"
        value="40"
      >
        40
      </button>
      <button
        class="ouiRangeTick"
        style="left:calc(-Infinity% + 8px);max-width:16.666666666666664%"
        tabindex="-1"
        type="button"
        value="60"
      >
        60
      </button>
      <button
        class="ouiRangeTick"
        style="left:calc(-Infinity% + 8px);max-width:16.666666666666664%"
        tabindex="-1"
        type="button"
        value="80"
      >
        80
      </button>
      <button
        class="ouiRangeTick"
        style="left:calc(-Infinity% + 8px);max-width:16.666666666666664%"
        tabindex="-1"
        type="button"
        value="100"
      >
        100
      </button>
    </div>
    <input
      aria-hidden="true"
      class="ouiRangeSlider ouiRangeSlider--hasTicks ouiRangeSlider--hasRange ouiDualRange__slider"
      id="generated-id"
      max="100"
      min="0"
      step="1"
      tabindex="-1"
      type="range"
    />
    <div
      class="ouiRangeHighlight ouiRangeHighlight--hasTicks"
    >
      <div
        class="ouiRangeHighlight__progress"
        style="margin-left:1%;width:7.000000000000001%"
      />
    </div>
  </div>
</div>
`;