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

exports[`OuiRange allows value prop to accept a number 1`] = `
<div
  class="ouiRangeWrapper ouiRange"
>
  <div
    aria-hidden="false"
    class="ouiRangeTrack"
  >
    <input
      aria-hidden="false"
      class="ouiRangeSlider"
      id="generated-id"
      max="100"
      min="0"
      step="1"
      type="range"
      value="8"
    />
    <div
      class="ouiRangeTooltip"
    >
      <output
        class="ouiRangeTooltip__value ouiRangeTooltip__value--right"
        style="left:8%"
      >
        8
      </output>
    </div>
  </div>
</div>
`;

exports[`OuiRange allows value prop to accept empty string 1`] = `
<div
  class="ouiRangeWrapper ouiRange"
>
  <div
    aria-hidden="false"
    class="ouiRangeTrack"
  >
    <input
      aria-hidden="false"
      class="ouiRangeSlider"
      id="generated-id"
      max="100"
      min="0"
      step="1"
      type="range"
      value=""
    />
  </div>
</div>
`;

exports[`OuiRange is rendered 1`] = `
<div
  class="ouiRangeWrapper ouiRange testClass1 testClass2"
>
  <div
    aria-hidden="false"
    class="ouiRangeTrack"
  >
    <input
      aria-hidden="false"
      aria-label="aria-label"
      class="ouiRangeSlider"
      data-test-subj="test subject string"
      id="id"
      max="100"
      min="0"
      name="name"
      step="1"
      type="range"
      value="8"
    />
  </div>
</div>
`;

exports[`OuiRange props compressed should render 1`] = `
<div
  class="ouiRangeWrapper ouiRangeWrapper--compressed ouiRange"
>
  <div
    aria-hidden="false"
    class="ouiRangeTrack ouiRangeTrack--compressed"
  >
    <input
      aria-hidden="false"
      class="ouiRangeSlider ouiRangeSlider--compressed"
      id="generated-id"
      max="100"
      min="0"
      step="1"
      type="range"
      value="8"
    />
  </div>
</div>
`;

exports[`OuiRange props custom ticks should render 1`] = `
<div
  class="ouiRangeWrapper ouiRange"
>
  <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="false"
      class="ouiRangeSlider ouiRangeSlider--hasTicks"
      id="generated-id"
      max="100"
      min="0"
      step="1"
      type="range"
      value="8"
    />
  </div>
</div>
`;

exports[`OuiRange props disabled should render 1`] = `
<div
  class="ouiRangeWrapper ouiRange"
>
  <div
    aria-hidden="false"
    class="ouiRangeTrack ouiRangeTrack--disabled"
  >
    <input
      aria-hidden="false"
      class="ouiRangeSlider"
      disabled=""
      id="generated-id"
      max="100"
      min="0"
      step="1"
      type="range"
      value="8"
    />
  </div>
</div>
`;

exports[`OuiRange props fullWidth should render 1`] = `
<div
  class="ouiRangeWrapper ouiRangeWrapper--fullWidth ouiRange"
>
  <div
    aria-hidden="false"
    class="ouiRangeTrack"
  >
    <input
      aria-hidden="false"
      class="ouiRangeSlider"
      id="generated-id"
      max="100"
      min="0"
      step="1"
      type="range"
      value="8"
    />
  </div>
</div>
`;

exports[`OuiRange props input should render 1`] = `
<div
  class="ouiRangeWrapper ouiRange ouiRange--hasInput testClass1 testClass2"
>
  <div
    aria-hidden="true"
    class="ouiRangeTrack"
  >
    <input
      aria-hidden="true"
      aria-label="aria-label"
      class="ouiRangeSlider"
      data-test-subj="test subject string"
      max="100"
      min="0"
      name="name"
      step="1"
      tabindex="-1"
      type="range"
      value="8"
    />
  </div>
  <div
    class="ouiRange__horizontalSpacer"
  />
  <div
    class="ouiFormControlLayout"
  >
    <div
      class="ouiFormControlLayout__childrenWrapper"
    >
      <input
        aria-label="aria-label"
        class="ouiFieldNumber ouiRangeInput ouiRangeInput--max"
        data-test-subj="test subject string"
        id="id"
        max="100"
        min="0"
        name="name"
        step="1"
        style="width:4.4em"
        type="number"
        value="8"
      />
    </div>
  </div>
</div>
`;

exports[`OuiRange props labels should render 1`] = `
<div
  class="ouiRangeWrapper ouiRange"
>
  <label
    class="ouiRangeLabel ouiRangeLabel--min"
  >
    0
  </label>
  <div
    aria-hidden="false"
    class="ouiRangeTrack"
  >
    <input
      aria-hidden="false"
      class="ouiRangeSlider"
      id="generated-id"
      max="100"
      min="0"
      step="1"
      type="range"
      value="8"
    />
  </div>
  <label
    class="ouiRangeLabel ouiRangeLabel--max"
  >
    100
  </label>
</div>
`;

exports[`OuiRange props levels should render 1`] = `
<div
  class="ouiRangeWrapper ouiRange"
>
  <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="false"
      class="ouiRangeSlider"
      id="generated-id"
      max="100"
      min="0"
      step="1"
      type="range"
      value="20"
    />
  </div>
</div>
`;

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

exports[`OuiRange 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"
      >
        <div
          class="ouiFormControlLayout__childrenWrapper"
        >
          <input
            aria-label="aria-label"
            class="ouiFieldNumber ouiRangeInput ouiRangeInput--max"
            data-test-subj="test subject string"
            id="id"
            max="100"
            min="0"
            name="name"
            step="1"
            type="number"
            value="8"
          />
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`OuiRange props ticks should render 1`] = `
<div
  class="ouiRangeWrapper ouiRange"
>
  <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="false"
      class="ouiRangeSlider ouiRangeSlider--hasTicks"
      id="generated-id"
      max="100"
      min="0"
      step="1"
      type="range"
      value="8"
    />
  </div>
</div>
`;

exports[`OuiRange props value should render 1`] = `
<div
  class="ouiRangeWrapper ouiRange"
>
  <div
    aria-hidden="false"
    class="ouiRangeTrack"
  >
    <input
      aria-hidden="false"
      class="ouiRangeSlider"
      id="generated-id"
      max="100"
      min="0"
      step="1"
      type="range"
      value="200"
    />
    <div
      class="ouiRangeTooltip"
    >
      <output
        class="ouiRangeTooltip__value ouiRangeTooltip__value--left"
        style="right:0%"
      >
        before200after
      </output>
    </div>
  </div>
</div>
`;