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

exports[`slider renders continuous slider 1`] = `
<DocumentFragment>
  <div
    class="pf-c-slider"
    style="--pf-c-slider--value: 50%; --pf-c-slider__value--c-form-control--width-chars: 2;"
  >
    <div
      class="pf-c-slider__main"
    >
      <div
        class="pf-c-slider__rail"
      >
        <div
          class="pf-c-slider__rail-track"
        />
      </div>
      <div
        aria-hidden="true"
        class="pf-c-slider__steps"
      >
        <div
          class="pf-c-slider__step pf-m-active"
          style="--pf-c-slider__step--Left: 0%;"
        >
          <div
            class="pf-c-slider__step-label"
          >
            0
          </div>
        </div>
        <div
          class="pf-c-slider__step"
          style="--pf-c-slider__step--Left: 100%;"
        >
          <div
            class="pf-c-slider__step-label"
          >
            100
          </div>
        </div>
      </div>
      <div
        aria-disabled="false"
        aria-label="Value"
        aria-valuemax="100"
        aria-valuemin="0"
        aria-valuenow="50"
        aria-valuetext="50"
        class="pf-c-slider__thumb"
        role="slider"
        tabindex="0"
      />
    </div>
    <div
      class="pf-c-slider__value"
    >
      <input
        aria-invalid="false"
        aria-label="Slider value input"
        class="pf-c-form-control pf-c-form-control"
        data-ouia-component-id="OUIA-Generated-TextInputBase-1"
        data-ouia-component-type="PF4/TextInput"
        data-ouia-safe="true"
        type="number"
        value="50"
      />
    </div>
  </div>
</DocumentFragment>
`;

exports[`slider renders continuous slider with custom steps 1`] = `
<DocumentFragment>
  <div
    class="pf-c-slider"
    style="--pf-c-slider--value: 50%; --pf-c-slider__value--c-form-control--width-chars: 1;"
  >
    <div
      class="pf-c-slider__main"
    >
      <div
        class="pf-c-slider__rail"
      >
        <div
          class="pf-c-slider__rail-track"
        />
      </div>
      <div
        aria-hidden="true"
        class="pf-c-slider__steps"
      >
        <div
          class="pf-c-slider__step pf-m-active"
          style="--pf-c-slider__step--Left: 0%;"
        >
          <div
            class="pf-c-slider__step-tick"
          />
          <div
            class="pf-c-slider__step-label"
          >
            0%
          </div>
        </div>
        <div
          class="pf-c-slider__step"
          style="--pf-c-slider__step--Left: 100%;"
        >
          <div
            class="pf-c-slider__step-tick"
          />
          <div
            class="pf-c-slider__step-label"
          >
            100%
          </div>
        </div>
      </div>
      <div
        aria-disabled="false"
        aria-label="Value"
        aria-valuemax="100"
        aria-valuemin="0"
        aria-valuenow="50"
        aria-valuetext="50"
        class="pf-c-slider__thumb"
        role="slider"
        tabindex="0"
      />
    </div>
  </div>
</DocumentFragment>
`;

exports[`slider renders disabled slider 1`] = `
<DocumentFragment>
  <div
    class="pf-c-slider pf-m-disabled"
    style="--pf-c-slider--value: 50%; --pf-c-slider__value--c-form-control--width-chars: 1;"
  >
    <div
      class="pf-c-slider__main"
    >
      <div
        class="pf-c-slider__rail"
      >
        <div
          class="pf-c-slider__rail-track"
        />
      </div>
      <div
        aria-hidden="true"
        class="pf-c-slider__steps"
      >
        <div
          class="pf-c-slider__step pf-m-active"
          style="--pf-c-slider__step--Left: 0%;"
        >
          <div
            class="pf-c-slider__step-label"
          >
            0
          </div>
        </div>
        <div
          class="pf-c-slider__step"
          style="--pf-c-slider__step--Left: 100%;"
        >
          <div
            class="pf-c-slider__step-label"
          >
            100
          </div>
        </div>
      </div>
      <div
        aria-disabled="true"
        aria-label="Value"
        aria-valuemax="100"
        aria-valuemin="0"
        aria-valuenow="50"
        aria-valuetext="50"
        class="pf-c-slider__thumb"
        role="slider"
        tabindex="-1"
      />
    </div>
  </div>
</DocumentFragment>
`;

exports[`slider renders discrete slider 1`] = `
<DocumentFragment>
  <div
    class="pf-c-slider"
    style="--pf-c-slider--value: 40%; --pf-c-slider__value--c-form-control--width-chars: 2;"
  >
    <div
      class="pf-c-slider__main"
    >
      <div
        class="pf-c-slider__rail"
      >
        <div
          class="pf-c-slider__rail-track"
        />
      </div>
      <div
        aria-hidden="true"
        class="pf-c-slider__steps"
      >
        <div
          class="pf-c-slider__step pf-m-active"
          style="--pf-c-slider__step--Left: 0%;"
        >
          <div
            class="pf-c-slider__step-label"
          >
            10
          </div>
        </div>
        <div
          class="pf-c-slider__step"
          style="--pf-c-slider__step--Left: 100%;"
        >
          <div
            class="pf-c-slider__step-label"
          >
            110
          </div>
        </div>
      </div>
      <div
        aria-disabled="false"
        aria-label="Value"
        aria-valuemax="110"
        aria-valuemin="10"
        aria-valuenow="50"
        aria-valuetext="50"
        class="pf-c-slider__thumb"
        role="slider"
        tabindex="0"
      />
    </div>
    <div
      class="pf-c-slider__value"
    >
      <input
        aria-invalid="false"
        aria-label="Slider value input"
        class="pf-c-form-control pf-c-form-control"
        data-ouia-component-id="OUIA-Generated-TextInputBase-2"
        data-ouia-component-type="PF4/TextInput"
        data-ouia-safe="true"
        type="number"
        value="50"
      />
    </div>
  </div>
</DocumentFragment>
`;

exports[`slider renders discrete slider with custom steps 1`] = `
<DocumentFragment>
  <div
    class="pf-c-slider"
    style="--pf-c-slider--value: 50%; --pf-c-slider__value--c-form-control--width-chars: 1;"
  >
    <div
      class="pf-c-slider__main"
    >
      <div
        class="pf-c-slider__rail"
      >
        <div
          class="pf-c-slider__rail-track"
        />
      </div>
      <div
        aria-hidden="true"
        class="pf-c-slider__steps"
      >
        <div
          class="pf-c-slider__step pf-m-active"
          style="--pf-c-slider__step--Left: 0%;"
        >
          <div
            class="pf-c-slider__step-tick"
          />
          <div
            class="pf-c-slider__step-label"
          >
            0%
          </div>
        </div>
        <div
          class="pf-c-slider__step pf-m-active"
          style="--pf-c-slider__step--Left: 25%;"
        >
          <div
            class="pf-c-slider__step-tick"
          />
        </div>
        <div
          class="pf-c-slider__step pf-m-active"
          style="--pf-c-slider__step--Left: 50%;"
        >
          <div
            class="pf-c-slider__step-tick"
          />
          <div
            class="pf-c-slider__step-label"
          >
            50%
          </div>
        </div>
        <div
          class="pf-c-slider__step"
          style="--pf-c-slider__step--Left: 75%;"
        >
          <div
            class="pf-c-slider__step-tick"
          />
        </div>
        <div
          class="pf-c-slider__step"
          style="--pf-c-slider__step--Left: 100%;"
        >
          <div
            class="pf-c-slider__step-tick"
          />
          <div
            class="pf-c-slider__step-label"
          >
            100%
          </div>
        </div>
      </div>
      <div
        aria-disabled="false"
        aria-label="Value"
        aria-valuemax="100"
        aria-valuemin="0"
        aria-valuenow="50"
        aria-valuetext="50%"
        class="pf-c-slider__thumb"
        role="slider"
        tabindex="0"
      />
    </div>
  </div>
</DocumentFragment>
`;

exports[`slider renders slider with input 1`] = `
<DocumentFragment>
  <div
    class="pf-c-slider"
    style="--pf-c-slider--value: 50%; --pf-c-slider__value--c-form-control--width-chars: 2;"
  >
    <div
      class="pf-c-slider__main"
    >
      <div
        class="pf-c-slider__rail"
      >
        <div
          class="pf-c-slider__rail-track"
        />
      </div>
      <div
        aria-hidden="true"
        class="pf-c-slider__steps"
      >
        <div
          class="pf-c-slider__step pf-m-active"
          style="--pf-c-slider__step--Left: 0%;"
        >
          <div
            class="pf-c-slider__step-label"
          >
            0
          </div>
        </div>
        <div
          class="pf-c-slider__step"
          style="--pf-c-slider__step--Left: 100%;"
        >
          <div
            class="pf-c-slider__step-label"
          >
            100
          </div>
        </div>
      </div>
      <div
        aria-disabled="false"
        aria-label="Value"
        aria-valuemax="100"
        aria-valuemin="0"
        aria-valuenow="50"
        aria-valuetext="50"
        class="pf-c-slider__thumb"
        role="slider"
        tabindex="0"
      />
    </div>
    <div
      class="pf-c-slider__value"
    >
      <div
        class="pf-c-input-group"
      >
        <input
          aria-invalid="false"
          aria-label="Slider value input"
          class="pf-c-form-control pf-c-form-control"
          data-ouia-component-id="OUIA-Generated-TextInputBase-3"
          data-ouia-component-type="PF4/TextInput"
          data-ouia-safe="true"
          type="number"
          value="50"
        />
        <span
          class="pf-c-input-group__text"
        >
           %
        </span>
      </div>
    </div>
  </div>
</DocumentFragment>
`;

exports[`slider renders slider with input above thumb 1`] = `
<DocumentFragment>
  <div
    class="pf-c-slider"
    style="--pf-c-slider--value: 50%; --pf-c-slider__value--c-form-control--width-chars: 2;"
  >
    <div
      class="pf-c-slider__main"
    >
      <div
        class="pf-c-slider__rail"
      >
        <div
          class="pf-c-slider__rail-track"
        />
      </div>
      <div
        aria-hidden="true"
        class="pf-c-slider__steps"
      >
        <div
          class="pf-c-slider__step pf-m-active"
          style="--pf-c-slider__step--Left: 0%;"
        >
          <div
            class="pf-c-slider__step-label"
          >
            0
          </div>
        </div>
        <div
          class="pf-c-slider__step"
          style="--pf-c-slider__step--Left: 100%;"
        >
          <div
            class="pf-c-slider__step-label"
          >
            100
          </div>
        </div>
      </div>
      <div
        aria-disabled="false"
        aria-label="Value"
        aria-valuemax="100"
        aria-valuemin="0"
        aria-valuenow="50"
        aria-valuetext="50"
        class="pf-c-slider__thumb"
        role="slider"
        tabindex="0"
      />
      <div
        class="pf-c-slider__value pf-m-floating"
      >
        <div
          class="pf-c-input-group"
        >
          <input
            aria-invalid="false"
            aria-label="Slider value input"
            class="pf-c-form-control pf-c-form-control"
            data-ouia-component-id="OUIA-Generated-TextInputBase-4"
            data-ouia-component-type="PF4/TextInput"
            data-ouia-safe="true"
            type="number"
            value="50"
          />
          <span
            class="pf-c-input-group__text"
          >
             %
          </span>
        </div>
      </div>
    </div>
  </div>
</DocumentFragment>
`;

exports[`slider renders slider with input actions 1`] = `
<DocumentFragment>
  <div
    class="pf-c-slider"
    style="--pf-c-slider--value: 50%; --pf-c-slider__value--c-form-control--width-chars: 1;"
  >
    <div
      class="pf-c-slider__actions"
    >
      <button
        aria-disabled="false"
        aria-label="Minus"
        class="pf-c-button pf-m-plain"
        data-ouia-component-id="OUIA-Generated-Button-plain-1"
        data-ouia-component-type="PF4/Button"
        data-ouia-safe="true"
        type="button"
      />
    </div>
    <div
      class="pf-c-slider__main"
    >
      <div
        class="pf-c-slider__rail"
      >
        <div
          class="pf-c-slider__rail-track"
        />
      </div>
      <div
        aria-hidden="true"
        class="pf-c-slider__steps"
      >
        <div
          class="pf-c-slider__step pf-m-active"
          style="--pf-c-slider__step--Left: 0%;"
        >
          <div
            class="pf-c-slider__step-label"
          >
            0
          </div>
        </div>
        <div
          class="pf-c-slider__step"
          style="--pf-c-slider__step--Left: 100%;"
        >
          <div
            class="pf-c-slider__step-label"
          >
            100
          </div>
        </div>
      </div>
      <div
        aria-disabled="false"
        aria-label="Value"
        aria-valuemax="100"
        aria-valuemin="0"
        aria-valuenow="50"
        aria-valuetext="50"
        class="pf-c-slider__thumb"
        role="slider"
        tabindex="0"
      />
    </div>
    <div
      class="pf-c-slider__actions"
    >
      <button
        aria-disabled="false"
        aria-label="Plus"
        class="pf-c-button pf-m-plain"
        data-ouia-component-id="OUIA-Generated-Button-plain-2"
        data-ouia-component-type="PF4/Button"
        data-ouia-safe="true"
        type="button"
      />
    </div>
  </div>
</DocumentFragment>
`;

exports[`slider renders slider with tooltip on thumb 1`] = `
<DocumentFragment>
  <div
    class="pf-c-slider"
    style="--pf-c-slider--value: 50%; --pf-c-slider__value--c-form-control--width-chars: 1;"
  >
    <div
      class="pf-c-slider__main"
    >
      <div
        class="pf-c-slider__rail"
      >
        <div
          class="pf-c-slider__rail-track"
        />
      </div>
      <div
        aria-hidden="true"
        class="pf-c-slider__steps"
      >
        <div
          class="pf-c-slider__step pf-m-active"
          style="--pf-c-slider__step--Left: 0%;"
        >
          <div
            class="pf-c-slider__step-label"
          >
            0
          </div>
        </div>
        <div
          class="pf-c-slider__step"
          style="--pf-c-slider__step--Left: 100%;"
        >
          <div
            class="pf-c-slider__step-label"
          >
            100
          </div>
        </div>
      </div>
      <div
        aria-disabled="false"
        aria-label="Value"
        aria-valuemax="100"
        aria-valuemin="0"
        aria-valuenow="50"
        aria-valuetext="50"
        class="pf-c-slider__thumb"
        role="slider"
        tabindex="0"
      />
    </div>
  </div>
</DocumentFragment>
`;
