ant-design-vue/components/slider/__tests__/__snapshots__/demo.test.js.snap

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

exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
<div>
  <div class="ant-slider">
    <div class="ant-slider-rail"></div>
    <div class="ant-slider-track" style="left: 0%; width: 30%;"></div>
    <div class="ant-slider-step"></div>
    <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30" class="ant-slider-handle" style="left: 30%;"></div>
    <div class="ant-slider-mark"></div>
  </div>
  <div class="ant-slider">
    <div class="ant-slider-rail"></div>
    <div class="ant-slider-track ant-slider-track-1" style="left: 20%; width: 30%;"></div>
    <div class="ant-slider-step"></div>
    <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="20" class="ant-slider-handle ant-slider-handle-1" style="left: 20%;"></div>
    <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" class="ant-slider-handle ant-slider-handle-2" style="left: 50%;"></div>
    <div class="ant-slider-mark"></div>
  </div>
  Disabled: <button type="button" role="switch" class="ant-switch ant-switch-small"><span class="ant-switch-inner"></span></button>
</div>
`;

exports[`renders ./components/slider/demo/event.md correctly 1`] = `
<div class="code-box-demo">
  <div class="ant-slider">
    <div class="ant-slider-rail"></div>
    <div class="ant-slider-track" style="left: 0%; width: 30%;"></div>
    <div class="ant-slider-step"></div>
    <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30" class="ant-slider-handle" style="left: 30%;"></div>
    <div class="ant-slider-mark"></div>
  </div>
  <div class="ant-slider">
    <div class="ant-slider-rail"></div>
    <div class="ant-slider-track ant-slider-track-1" style="left: 20%; width: 30%;"></div>
    <div class="ant-slider-step"></div>
    <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="20" class="ant-slider-handle ant-slider-handle-1" style="left: 20%;"></div>
    <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" class="ant-slider-handle ant-slider-handle-2" style="left: 50%;"></div>
    <div class="ant-slider-mark"></div>
  </div>
</div>
`;

exports[`renders ./components/slider/demo/icon-slider.md correctly 1`] = `
<div class="icon-wrapper"><i class="anticon anticon-frown-o" style="color: rgba(0, 0, 0, 0.45);"></i>
  <div class="ant-slider">
    <div class="ant-slider-rail"></div>
    <div class="ant-slider-track" style="left: 0%; width: 0%;"></div>
    <div class="ant-slider-step"></div>
    <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="20" aria-valuenow="0" class="ant-slider-handle" style="left: 0%;"></div>
    <div class="ant-slider-mark"></div>
  </div>
  <div class="ant-slider">
    <div class="ant-slider-rail"></div>
    <div class="ant-slider-track" style="left: 0%; width: 0%;"></div>
    <div class="ant-slider-step"></div>
    <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="20" aria-valuenow="0" class="ant-slider-handle" style="left: 0%;"></div>
    <div class="ant-slider-mark"></div>
  </div> <i class="anticon anticon-smile-o"></i>
</div>
`;

exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
<div>
  <div class="ant-row">
    <div class="ant-col-12">
      <div class="ant-slider">
        <div class="ant-slider-rail"></div>
        <div class="ant-slider-track" style="left: 0%; width: 0%;"></div>
        <div class="ant-slider-step"></div>
        <div role="slider" tabindex="0" aria-valuemin="1" aria-valuemax="20" aria-valuenow="1" class="ant-slider-handle" style="left: 0%;"></div>
        <div class="ant-slider-mark"></div>
      </div>
    </div>
    <div class="ant-col-4">
      <div class="ant-input-number" style="margin-left: 16px;">
        <div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled" unselectable="unselectable" role="button" aria-label="Decrease Value" aria-disabled="true"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
        <div role="spinbutton" aria-valuemin="1" aria-valuemax="20" aria-valuenow="1" class="ant-input-number-input-wrap"><input autocomplete="off" max="20" min="1" step="1" class="ant-input-number-input"></div>
      </div>
    </div>
  </div>
  <div class="ant-row">
    <div class="ant-col-12">
      <div class="ant-slider">
        <div class="ant-slider-rail"></div>
        <div class="ant-slider-track" style="left: 0%; width: 0%;"></div>
        <div class="ant-slider-step"></div>
        <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0" class="ant-slider-handle" style="left: 0%;"></div>
        <div class="ant-slider-mark"></div>
      </div>
    </div>
    <div class="ant-col-4">
      <div class="ant-input-number" style="margin-left: 16px;">
        <div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled" unselectable="unselectable" role="button" aria-label="Decrease Value" aria-disabled="true"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
        <div role="spinbutton" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0" class="ant-input-number-input-wrap"><input autocomplete="off" max="1" min="0" step="0.01" class="ant-input-number-input"></div>
      </div>
    </div>
  </div>
</div>
`;

exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
<div id="components-slider-demo-mark">
  <h4>included=true</h4>
  <div class="ant-slider ant-slider-with-marks">
    <div class="ant-slider-rail"></div>
    <div class="ant-slider-track" style="left: 0%; width: 37%;"></div>
    <div class="ant-slider-step"><span class="ant-slider-dot ant-slider-dot-active" style="left: 0%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left: 26%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left: 37%;"></span><span class="ant-slider-dot" style="left: 100%;"></span></div>
    <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="37" class="ant-slider-handle" style="left: 37%;"></div>
    <div class="ant-slider-mark"><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 0%;">0°C</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 26%;">26°C</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 37%;">37°C</span><span class="ant-slider-mark-text" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 100%; color: rgb(255, 85, 0);"><strong>100°C</strong></span></div>
  </div>
  <div class="ant-slider ant-slider-with-marks">
    <div class="ant-slider-rail"></div>
    <div class="ant-slider-track ant-slider-track-1" style="left: 26%; width: 11%;"></div>
    <div class="ant-slider-step"><span class="ant-slider-dot" style="left: 0%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left: 26%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left: 37%;"></span><span class="ant-slider-dot" style="left: 100%;"></span></div>
    <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="26" class="ant-slider-handle ant-slider-handle-1" style="left: 26%;"></div>
    <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="37" class="ant-slider-handle ant-slider-handle-2" style="left: 37%;"></div>
    <div class="ant-slider-mark"><span class="ant-slider-mark-text" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 0%;">0°C</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 26%;">26°C</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 37%;">37°C</span><span class="ant-slider-mark-text" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 100%; color: rgb(255, 85, 0);"><strong>100°C</strong></span></div>
  </div>
  <h4>included=false</h4>
  <div class="ant-slider ant-slider-with-marks">
    <div class="ant-slider-rail"></div>
    <!---->
    <div class="ant-slider-step"><span class="ant-slider-dot" style="left: 0%;"></span><span class="ant-slider-dot" style="left: 26%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left: 37%;"></span><span class="ant-slider-dot" style="left: 100%;"></span></div>
    <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="37" class="ant-slider-handle" style="left: 37%;"></div>
    <div class="ant-slider-mark"><span class="ant-slider-mark-text" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 0%;">0°C</span><span class="ant-slider-mark-text" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 26%;">26°C</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 37%;">37°C</span><span class="ant-slider-mark-text" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 100%; color: rgb(255, 85, 0);"><strong>100°C</strong></span></div>
  </div>
  <h4>marks &amp; step</h4>
  <div class="ant-slider ant-slider-with-marks">
    <div class="ant-slider-rail"></div>
    <div class="ant-slider-track" style="left: 0%; width: 37%;"></div>
    <div class="ant-slider-step"><span class="ant-slider-dot ant-slider-dot-active" style="left: 0%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left: 26%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left: 37%;"></span><span class="ant-slider-dot" style="left: 100%;"></span></div>
    <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="37" class="ant-slider-handle" style="left: 37%;"></div>
    <div class="ant-slider-mark"><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 0%;">0°C</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 26%;">26°C</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 37%;">37°C</span><span class="ant-slider-mark-text" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 100%; color: rgb(255, 85, 0);"><strong>100°C</strong></span></div>
  </div>
  <h4>step=null</h4>
  <div class="ant-slider ant-slider-with-marks">
    <div class="ant-slider-rail"></div>
    <div class="ant-slider-track" style="left: 0%; width: 37%;"></div>
    <div class="ant-slider-step"><span class="ant-slider-dot ant-slider-dot-active" style="left: 0%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left: 26%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left: 37%;"></span><span class="ant-slider-dot" style="left: 100%;"></span></div>
    <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="37" class="ant-slider-handle" style="left: 37%;"></div>
    <div class="ant-slider-mark"><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 0%;">0°C</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 26%;">26°C</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 37%;">37°C</span><span class="ant-slider-mark-text" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 100%; color: rgb(255, 85, 0);"><strong>100°C</strong></span></div>
  </div>
</div>
`;

exports[`renders ./components/slider/demo/tip-formatter.md correctly 1`] = `
<div>
  <div class="ant-slider">
    <div class="ant-slider-rail"></div>
    <div class="ant-slider-track" style="left: 0%; width: 0%;"></div>
    <div class="ant-slider-step"></div>
    <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" class="ant-slider-handle" style="left: 0%;"></div>
    <div class="ant-slider-mark"></div>
  </div>
  <div class="ant-slider">
    <div class="ant-slider-rail"></div>
    <div class="ant-slider-track" style="left: 0%; width: 0%;"></div>
    <div class="ant-slider-step"></div>
    <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" class="ant-slider-handle" style="left: 0%;"></div>
    <div class="ant-slider-mark"></div>
  </div>
</div>
`;

exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
<div style="height: 300px;">
  <div style="float: left; height: 300px; margin-left: 70px;">
    <div class="ant-slider ant-slider-vertical">
      <div class="ant-slider-rail"></div>
      <div class="ant-slider-track" style="bottom: 0%; height: 30%;"></div>
      <div class="ant-slider-step"></div>
      <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30" class="ant-slider-handle" style="bottom: 30%;"></div>
      <div class="ant-slider-mark"></div>
    </div>
  </div>
  <div style="float: left; height: 300px; margin-left: 70px;">
    <div class="ant-slider ant-slider-vertical">
      <div class="ant-slider-rail"></div>
      <div class="ant-slider-track ant-slider-track-1" style="bottom: 20%; height: 30%;"></div>
      <div class="ant-slider-step"></div>
      <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="20" class="ant-slider-handle ant-slider-handle-1" style="bottom: 20%;"></div>
      <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" class="ant-slider-handle ant-slider-handle-2" style="bottom: 50%;"></div>
      <div class="ant-slider-mark"></div>
    </div>
  </div>
  <div style="float: left; height: 300px; margin-left: 70px;">
    <div class="ant-slider ant-slider-with-marks ant-slider-vertical">
      <div class="ant-slider-rail"></div>
      <div class="ant-slider-track ant-slider-track-1" style="bottom: 26%; height: 11%;"></div>
      <div class="ant-slider-step"><span class="ant-slider-dot" style="bottom: 0%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="bottom: 26%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="bottom: 37%;"></span><span class="ant-slider-dot" style="bottom: 100%;"></span></div>
      <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="26" class="ant-slider-handle ant-slider-handle-1" style="bottom: 26%;"></div>
      <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="37" class="ant-slider-handle ant-slider-handle-2" style="bottom: 37%;"></div>
      <div class="ant-slider-mark"><span class="ant-slider-mark-text" style="margin-bottom: -50%; bottom: 0%;">0°C</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="margin-bottom: -50%; bottom: 26%;">26°C</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="margin-bottom: -50%; bottom: 37%;">37°C</span><span class="ant-slider-mark-text" style="margin-bottom: -50%; bottom: 100%; color: rgb(255, 85, 0);"><strong>100°C</strong></span></div>
    </div>
  </div>
</div>
`;