ant-design/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
      class="ant-slider-track"
      style="left:0%;width:30%"
    />
    <div
      class="ant-slider-step"
    />
    <div
      aria-disabled="false"
      aria-valuemax="100"
      aria-valuemin="0"
      aria-valuenow="30"
      class="ant-slider-handle"
      role="slider"
      style="left:30%"
      tabindex="0"
    />
    <div
      class="ant-slider-mark"
    />
  </div>
  <div
    class="ant-slider"
  >
    <div
      class="ant-slider-rail"
    />
    <div
      class="ant-slider-track ant-slider-track-1"
      style="left:20%;width:30%"
    />
    <div
      class="ant-slider-step"
    />
    <div
      aria-disabled="false"
      aria-valuemax="100"
      aria-valuemin="0"
      aria-valuenow="20"
      class="ant-slider-handle ant-slider-handle-1"
      role="slider"
      style="left:20%"
      tabindex="0"
    />
    <div
      aria-disabled="false"
      aria-valuemax="100"
      aria-valuemin="0"
      aria-valuenow="50"
      class="ant-slider-handle ant-slider-handle-2"
      role="slider"
      style="left:50%"
      tabindex="0"
    />
    <div
      class="ant-slider-mark"
    />
  </div>
  Disabled: 
  <span
    class="ant-switch-small ant-switch"
    tabindex="0"
  >
    <span
      class="ant-switch-inner"
    />
  </span>
</div>
`;

exports[`renders ./components/slider/demo/event.md correctly 1`] = `
<div>
  <div
    class="ant-slider"
  >
    <div
      class="ant-slider-rail"
    />
    <div
      class="ant-slider-track"
      style="left:0%;width:30%"
    />
    <div
      class="ant-slider-step"
    />
    <div
      aria-disabled="false"
      aria-valuemax="100"
      aria-valuemin="0"
      aria-valuenow="30"
      class="ant-slider-handle"
      role="slider"
      style="left:30%"
      tabindex="0"
    />
    <div
      class="ant-slider-mark"
    />
  </div>
  <div
    class="ant-slider"
  >
    <div
      class="ant-slider-rail"
    />
    <div
      class="ant-slider-track ant-slider-track-1"
      style="left:20%;width:30%"
    />
    <div
      class="ant-slider-step"
    />
    <div
      aria-disabled="false"
      aria-valuemax="100"
      aria-valuemin="0"
      aria-valuenow="20"
      class="ant-slider-handle ant-slider-handle-1"
      role="slider"
      style="left:20%"
      tabindex="0"
    />
    <div
      aria-disabled="false"
      aria-valuemax="100"
      aria-valuemin="0"
      aria-valuenow="50"
      class="ant-slider-handle ant-slider-handle-2"
      role="slider"
      style="left:50%"
      tabindex="0"
    />
    <div
      class="ant-slider-mark"
    />
  </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, .45)"
  >
    <svg
      aria-hidden="true"
      class=""
      data-icon="frown-o"
      fill="currentColor"
      height="1em"
      viewBox="0 0 1024 1024"
      width="1em"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M512 0C229.2 0 0 229.2 0 512s229.2 512 512 512 512-229.2 512-512S794.8 0 512 0zm311.1 823.1c-40.4 40.4-87.5 72.2-139.9 94.3C629 940.4 571.4 952 512 952s-117-11.6-171.2-34.5c-52.4-22.2-99.4-53.9-139.9-94.3-40.4-40.4-72.2-87.5-94.3-139.9C83.6 629 72 571.4 72 512s11.6-117 34.5-171.2c22.2-52.4 53.9-99.4 94.3-139.9 40.4-40.4 87.5-72.2 139.9-94.3C395 83.6 452.6 72 512 72s117 11.6 171.2 34.5c52.4 22.2 99.4 53.9 139.9 94.3 40.4 40.4 72.2 87.5 94.3 139.9C940.4 395 952 452.6 952 512s-11.6 117-34.5 171.2c-22.2 52.4-53.9 99.5-94.4 139.9z"
      />
      <path
        d="M640.3 765.5c-19.9 0-36-16.1-36-36 0-50.9-41.4-92.3-92.3-92.3s-92.3 41.4-92.3 92.3c0 19.9-16.1 36-36 36s-36-16.1-36-36c0-90.6 73.7-164.3 164.3-164.3s164.3 73.7 164.3 164.3c0 19.9-16.1 36-36 36zM194.2 382.4a60 60 0 1 0 120 0 60 60 0 1 0-120 0zM709.5 382.4a60 60 0 1 0 120 0 60 60 0 1 0-120 0z"
      />
    </svg>
  </i>
  <div
    class="ant-slider"
  >
    <div
      class="ant-slider-rail"
    />
    <div
      class="ant-slider-track"
      style="left:0%;width:0%"
    />
    <div
      class="ant-slider-step"
    />
    <div
      aria-disabled="false"
      aria-valuemax="20"
      aria-valuemin="0"
      aria-valuenow="0"
      class="ant-slider-handle"
      role="slider"
      style="left:0%"
      tabindex="0"
    />
    <div
      class="ant-slider-mark"
    />
  </div>
  <i
    class="anticon anticon-smile-o"
    style="color:"
  >
    <svg
      aria-hidden="true"
      class=""
      data-icon="smile-o"
      fill="currentColor"
      height="1em"
      viewBox="0 0 1024 1024"
      width="1em"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M512 0C229.2 0 0 229.2 0 512s229.2 512 512 512 512-229.2 512-512S794.8 0 512 0zm311.1 823.1c-40.4 40.4-87.5 72.2-139.9 94.3C629 940.4 571.4 952 512 952s-117-11.6-171.2-34.5c-52.4-22.2-99.4-53.9-139.9-94.3-40.4-40.4-72.2-87.5-94.3-139.9C83.6 629 72 571.4 72 512s11.6-117 34.5-171.2c22.2-52.4 53.9-99.4 94.3-139.9 40.4-40.4 87.5-72.2 139.9-94.3C395 83.6 452.6 72 512 72s117 11.6 171.2 34.5c52.4 22.2 99.4 53.9 139.9 94.3 40.4 40.4 72.2 87.5 94.3 139.9C940.4 395 952 452.6 952 512s-11.6 117-34.5 171.2c-22.2 52.4-53.9 99.5-94.4 139.9z"
      />
      <path
        d="M640.3 565.2c-19.9 0-36 16.1-36 36 0 50.9-41.4 92.3-92.3 92.3s-92.3-41.4-92.3-92.3c0-19.9-16.1-36-36-36s-36 16.1-36 36c0 90.6 73.7 164.3 164.3 164.3s164.3-73.7 164.3-164.3c0-19.9-16.1-36-36-36zM194.2 382.4a60 60 0 1 0 120 0 60 60 0 1 0-120 0zM709.5 382.4a60 60 0 1 0 120 0 60 60 0 1 0-120 0z"
      />
    </svg>
  </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
          class="ant-slider-track"
          style="left:0%;width:0%"
        />
        <div
          class="ant-slider-step"
        />
        <div
          aria-disabled="false"
          aria-valuemax="20"
          aria-valuemin="1"
          aria-valuenow="1"
          class="ant-slider-handle"
          role="slider"
          style="left:0%"
          tabindex="0"
        />
        <div
          class="ant-slider-mark"
        />
      </div>
    </div>
    <div
      class="ant-col-4"
    >
      <div
        class="ant-input-number"
        style="margin-left:16px"
      >
        <div
          class="ant-input-number-handler-wrap"
        >
          <span
            aria-disabled="false"
            aria-label="Increase Value"
            class="ant-input-number-handler ant-input-number-handler-up "
            role="button"
            unselectable="unselectable"
          >
            <i
              class="anticon anticon-up ant-input-number-handler-up-inner"
            >
              <svg
                aria-hidden="true"
                class=""
                data-icon="up"
                fill="currentColor"
                height="1em"
                viewBox="0 0 1024 1024"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M895.7 659.9c0-9.6-3.2-19.3-9.6-27.4L545.2 208.7c-8.3-10.3-20.8-16.3-34.1-16.3-13.2 0-25.8 6-34 16.3L138 630.7c-15.1 18.8-12.1 46.3 6.7 61.4 18.8 15.1 46.3 12.1 61.4-6.7l305.1-379.6L818 687.3c15.1 18.8 42.6 21.8 61.4 6.7 10.7-8.7 16.3-21.3 16.3-34.1z"
                />
              </svg>
            </i>
          </span>
          <span
            aria-disabled="true"
            aria-label="Decrease Value"
            class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
            role="button"
            unselectable="unselectable"
          >
            <i
              class="anticon anticon-down ant-input-number-handler-down-inner"
            >
              <svg
                aria-hidden="true"
                class=""
                data-icon="down"
                fill="currentColor"
                height="1em"
                viewBox="0 0 1024 1024"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M895.7 300.1c0 9.6-3.2 19.3-9.6 27.4L545.2 751.3c-8.3 10.3-20.8 16.3-34.1 16.3-13.2 0-25.8-6-34-16.3L138 329.3c-15.1-18.8-12.1-46.3 6.7-61.4 18.8-15.1 46.3-12.1 61.4 6.7l305.1 379.6L818 272.7c15.1-18.8 42.6-21.8 61.4-6.7 10.7 8.7 16.3 21.3 16.3 34.1z"
                />
              </svg>
            </i>
          </span>
        </div>
        <div
          aria-valuemax="20"
          aria-valuemin="1"
          aria-valuenow="1"
          class="ant-input-number-input-wrap"
          role="spinbutton"
        >
          <input
            autocomplete="off"
            class="ant-input-number-input"
            max="20"
            min="1"
            step="1"
            value="1"
          />
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row"
  >
    <div
      class="ant-col-12"
    >
      <div
        class="ant-slider"
      >
        <div
          class="ant-slider-rail"
        />
        <div
          class="ant-slider-track"
          style="left:0%;width:0%"
        />
        <div
          class="ant-slider-step"
        />
        <div
          aria-disabled="false"
          aria-valuemax="1"
          aria-valuemin="0"
          aria-valuenow="0"
          class="ant-slider-handle"
          role="slider"
          style="left:0%"
          tabindex="0"
        />
        <div
          class="ant-slider-mark"
        />
      </div>
    </div>
    <div
      class="ant-col-4"
    >
      <div
        class="ant-input-number"
        style="margin-left:16px"
      >
        <div
          class="ant-input-number-handler-wrap"
        >
          <span
            aria-disabled="false"
            aria-label="Increase Value"
            class="ant-input-number-handler ant-input-number-handler-up "
            role="button"
            unselectable="unselectable"
          >
            <i
              class="anticon anticon-up ant-input-number-handler-up-inner"
            >
              <svg
                aria-hidden="true"
                class=""
                data-icon="up"
                fill="currentColor"
                height="1em"
                viewBox="0 0 1024 1024"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M895.7 659.9c0-9.6-3.2-19.3-9.6-27.4L545.2 208.7c-8.3-10.3-20.8-16.3-34.1-16.3-13.2 0-25.8 6-34 16.3L138 630.7c-15.1 18.8-12.1 46.3 6.7 61.4 18.8 15.1 46.3 12.1 61.4-6.7l305.1-379.6L818 687.3c15.1 18.8 42.6 21.8 61.4 6.7 10.7-8.7 16.3-21.3 16.3-34.1z"
                />
              </svg>
            </i>
          </span>
          <span
            aria-disabled="true"
            aria-label="Decrease Value"
            class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
            role="button"
            unselectable="unselectable"
          >
            <i
              class="anticon anticon-down ant-input-number-handler-down-inner"
            >
              <svg
                aria-hidden="true"
                class=""
                data-icon="down"
                fill="currentColor"
                height="1em"
                viewBox="0 0 1024 1024"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M895.7 300.1c0 9.6-3.2 19.3-9.6 27.4L545.2 751.3c-8.3 10.3-20.8 16.3-34.1 16.3-13.2 0-25.8-6-34-16.3L138 329.3c-15.1-18.8-12.1-46.3 6.7-61.4 18.8-15.1 46.3-12.1 61.4 6.7l305.1 379.6L818 272.7c15.1-18.8 42.6-21.8 61.4-6.7 10.7 8.7 16.3 21.3 16.3 34.1z"
                />
              </svg>
            </i>
          </span>
        </div>
        <div
          aria-valuemax="1"
          aria-valuemin="0"
          aria-valuenow="0"
          class="ant-input-number-input-wrap"
          role="spinbutton"
        >
          <input
            autocomplete="off"
            class="ant-input-number-input"
            max="1"
            min="0"
            step="0.01"
            value="0.00"
          />
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
<div>
  <h4>
    included=true
  </h4>
  <div
    class="ant-slider ant-slider-with-marks"
  >
    <div
      class="ant-slider-rail"
    />
    <div
      class="ant-slider-track"
      style="left:0%;width:37%"
    />
    <div
      class="ant-slider-step"
    >
      <span
        class="ant-slider-dot ant-slider-dot-active"
        style="left:0%"
      />
      <span
        class="ant-slider-dot ant-slider-dot-active"
        style="left:26%"
      />
      <span
        class="ant-slider-dot ant-slider-dot-active"
        style="left:37%"
      />
      <span
        class="ant-slider-dot"
        style="left:100%"
      />
    </div>
    <div
      aria-disabled="false"
      aria-valuemax="100"
      aria-valuemin="0"
      aria-valuenow="37"
      class="ant-slider-handle"
      role="slider"
      style="left:37%"
      tabindex="0"
    />
    <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:#f50"
      >
        <strong>
          100°C
        </strong>
      </span>
    </div>
  </div>
  <div
    class="ant-slider ant-slider-with-marks"
  >
    <div
      class="ant-slider-rail"
    />
    <div
      class="ant-slider-track ant-slider-track-1"
      style="left:26%;width:11%"
    />
    <div
      class="ant-slider-step"
    >
      <span
        class="ant-slider-dot"
        style="left:0%"
      />
      <span
        class="ant-slider-dot ant-slider-dot-active"
        style="left:26%"
      />
      <span
        class="ant-slider-dot ant-slider-dot-active"
        style="left:37%"
      />
      <span
        class="ant-slider-dot"
        style="left:100%"
      />
    </div>
    <div
      aria-disabled="false"
      aria-valuemax="100"
      aria-valuemin="0"
      aria-valuenow="26"
      class="ant-slider-handle ant-slider-handle-1"
      role="slider"
      style="left:26%"
      tabindex="0"
    />
    <div
      aria-disabled="false"
      aria-valuemax="100"
      aria-valuemin="0"
      aria-valuenow="37"
      class="ant-slider-handle ant-slider-handle-2"
      role="slider"
      style="left:37%"
      tabindex="0"
    />
    <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:#f50"
      >
        <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
      class="ant-slider-step"
    >
      <span
        class="ant-slider-dot"
        style="left:0%"
      />
      <span
        class="ant-slider-dot"
        style="left:26%"
      />
      <span
        class="ant-slider-dot ant-slider-dot-active"
        style="left:37%"
      />
      <span
        class="ant-slider-dot"
        style="left:100%"
      />
    </div>
    <div
      aria-disabled="false"
      aria-valuemax="100"
      aria-valuemin="0"
      aria-valuenow="37"
      class="ant-slider-handle"
      role="slider"
      style="left:37%"
      tabindex="0"
    />
    <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:#f50"
      >
        <strong>
          100°C
        </strong>
      </span>
    </div>
  </div>
  <h4>
    marks & step
  </h4>
  <div
    class="ant-slider ant-slider-with-marks"
  >
    <div
      class="ant-slider-rail"
    />
    <div
      class="ant-slider-track"
      style="left:0%;width:37%"
    />
    <div
      class="ant-slider-step"
    >
      <span
        class="ant-slider-dot ant-slider-dot-active"
        style="left:0%"
      />
      <span
        class="ant-slider-dot ant-slider-dot-active"
        style="left:26%"
      />
      <span
        class="ant-slider-dot ant-slider-dot-active"
        style="left:37%"
      />
      <span
        class="ant-slider-dot"
        style="left:100%"
      />
    </div>
    <div
      aria-disabled="false"
      aria-valuemax="100"
      aria-valuemin="0"
      aria-valuenow="37"
      class="ant-slider-handle"
      role="slider"
      style="left:37%"
      tabindex="0"
    />
    <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:#f50"
      >
        <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
      class="ant-slider-track"
      style="left:0%;width:37%"
    />
    <div
      class="ant-slider-step"
    >
      <span
        class="ant-slider-dot ant-slider-dot-active"
        style="left:0%"
      />
      <span
        class="ant-slider-dot ant-slider-dot-active"
        style="left:26%"
      />
      <span
        class="ant-slider-dot ant-slider-dot-active"
        style="left:37%"
      />
      <span
        class="ant-slider-dot"
        style="left:100%"
      />
    </div>
    <div
      aria-disabled="false"
      aria-valuemax="100"
      aria-valuemin="0"
      aria-valuenow="37"
      class="ant-slider-handle"
      role="slider"
      style="left:37%"
      tabindex="0"
    />
    <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:#f50"
      >
        <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
      class="ant-slider-track"
      style="left:0%;width:0%"
    />
    <div
      class="ant-slider-step"
    />
    <div
      aria-disabled="false"
      aria-valuemax="100"
      aria-valuemin="0"
      aria-valuenow="0"
      class="ant-slider-handle"
      role="slider"
      style="left:0%"
      tabindex="0"
    />
    <div
      class="ant-slider-mark"
    />
  </div>
  <div
    class="ant-slider"
  >
    <div
      class="ant-slider-rail"
    />
    <div
      class="ant-slider-track"
      style="left:0%;width:0%"
    />
    <div
      class="ant-slider-step"
    />
    <div
      aria-disabled="false"
      aria-valuemax="100"
      aria-valuemin="0"
      aria-valuenow="0"
      class="ant-slider-handle"
      role="slider"
      style="left:0%"
      tabindex="0"
    />
    <div
      class="ant-slider-mark"
    />
  </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
        class="ant-slider-track"
        style="bottom:0%;height:30%"
      />
      <div
        class="ant-slider-step"
      />
      <div
        aria-disabled="false"
        aria-valuemax="100"
        aria-valuemin="0"
        aria-valuenow="30"
        class="ant-slider-handle"
        role="slider"
        style="bottom:30%"
        tabindex="0"
      />
      <div
        class="ant-slider-mark"
      />
    </div>
  </div>
  <div
    style="float:left;height:300px;margin-left:70px"
  >
    <div
      class="ant-slider ant-slider-vertical"
    >
      <div
        class="ant-slider-rail"
      />
      <div
        class="ant-slider-track ant-slider-track-1"
        style="bottom:20%;height:30%"
      />
      <div
        class="ant-slider-step"
      />
      <div
        aria-disabled="false"
        aria-valuemax="100"
        aria-valuemin="0"
        aria-valuenow="20"
        class="ant-slider-handle ant-slider-handle-1"
        role="slider"
        style="bottom:20%"
        tabindex="0"
      />
      <div
        aria-disabled="false"
        aria-valuemax="100"
        aria-valuemin="0"
        aria-valuenow="50"
        class="ant-slider-handle ant-slider-handle-2"
        role="slider"
        style="bottom:50%"
        tabindex="0"
      />
      <div
        class="ant-slider-mark"
      />
    </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
        class="ant-slider-track ant-slider-track-1"
        style="bottom:26%;height:11%"
      />
      <div
        class="ant-slider-step"
      >
        <span
          class="ant-slider-dot"
          style="bottom:0%"
        />
        <span
          class="ant-slider-dot ant-slider-dot-active"
          style="bottom:26%"
        />
        <span
          class="ant-slider-dot ant-slider-dot-active"
          style="bottom:37%"
        />
        <span
          class="ant-slider-dot"
          style="bottom:100%"
        />
      </div>
      <div
        aria-disabled="false"
        aria-valuemax="100"
        aria-valuemin="0"
        aria-valuenow="26"
        class="ant-slider-handle ant-slider-handle-1"
        role="slider"
        style="bottom:26%"
        tabindex="0"
      />
      <div
        aria-disabled="false"
        aria-valuemax="100"
        aria-valuemin="0"
        aria-valuenow="37"
        class="ant-slider-handle ant-slider-handle-2"
        role="slider"
        style="bottom:37%"
        tabindex="0"
      />
      <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:#f50"
        >
          <strong>
            100°C
          </strong>
        </span>
      </div>
    </div>
  </div>
</div>
`;