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

exports[`Slider should render correctly 1`] = `
"<div class=\\"slider \\"><div class=\\"dot  \\">20<style>
        .dot {
          position: absolute;
          left: 20%;
          top: 50%;
          transform: translate(-50%, -50%);
          height: 1.25rem;
          min-width: 1.25rem;
          line-height: 1.25rem;
          border-radius: 0.625rem;
          user-select: none;
          font-weight: 700;
          font-size: 0.75rem;
          z-index: 100;
          background-color: #0070f3;
          color: #fff;
          text-align: center;
          padding: 0 calc(0.86 * 8pt);
        }

        .dot.disabled {
          cursor: not-allowed !important;
          background-color: #eaeaea;
          color: #888;
        }

        .dot.click {
          transition: all 200ms ease;
        }

        .dot:hover {
          cursor: grab;
        }

        .dot:active {
          cursor: grabbing;
        }
      </style></div><style>
        .slider {
          width: 100%;
          height: 0.5rem;
          border-radius: 50px;
          background-color: #111;
          position: relative;
          cursor: pointer;
        }
      </style></div>"
`;

exports[`Slider should work with different status 1`] = `
"<div><div class=\\"slider \\"><div class=\\"dot  \\">0<style>
        .dot {
          position: absolute;
          left: 0%;
          top: 50%;
          transform: translate(-50%, -50%);
          height: 1.25rem;
          min-width: 1.25rem;
          line-height: 1.25rem;
          border-radius: 0.625rem;
          user-select: none;
          font-weight: 700;
          font-size: 0.75rem;
          z-index: 100;
          background-color: #0070f3;
          color: #fff;
          text-align: center;
          padding: 0 calc(0.86 * 8pt);
        }

        .dot.disabled {
          cursor: not-allowed !important;
          background-color: #eaeaea;
          color: #888;
        }

        .dot.click {
          transition: all 200ms ease;
        }

        .dot:hover {
          cursor: grab;
        }

        .dot:active {
          cursor: grabbing;
        }
      </style></div><style>
        .slider {
          width: 100%;
          height: 0.5rem;
          border-radius: 50px;
          background-color: #111;
          position: relative;
          cursor: pointer;
        }
      </style></div><div class=\\"slider \\"><div class=\\"dot  \\">0<style>
        .dot {
          position: absolute;
          left: 0%;
          top: 50%;
          transform: translate(-50%, -50%);
          height: 1.25rem;
          min-width: 1.25rem;
          line-height: 1.25rem;
          border-radius: 0.625rem;
          user-select: none;
          font-weight: 700;
          font-size: 0.75rem;
          z-index: 100;
          background-color: #0070f3;
          color: #fff;
          text-align: center;
          padding: 0 calc(0.86 * 8pt);
        }

        .dot.disabled {
          cursor: not-allowed !important;
          background-color: #eaeaea;
          color: #888;
        }

        .dot.click {
          transition: all 200ms ease;
        }

        .dot:hover {
          cursor: grab;
        }

        .dot:active {
          cursor: grabbing;
        }
      </style></div><style>
        .slider {
          width: 100%;
          height: 0.5rem;
          border-radius: 50px;
          background-color: #0070f3;
          position: relative;
          cursor: pointer;
        }
      </style></div><div class=\\"slider \\"><div class=\\"dot  \\">0<style>
        .dot {
          position: absolute;
          left: 0%;
          top: 50%;
          transform: translate(-50%, -50%);
          height: 1.25rem;
          min-width: 1.25rem;
          line-height: 1.25rem;
          border-radius: 0.625rem;
          user-select: none;
          font-weight: 700;
          font-size: 0.75rem;
          z-index: 100;
          background-color: #0070f3;
          color: #fff;
          text-align: center;
          padding: 0 calc(0.86 * 8pt);
        }

        .dot.disabled {
          cursor: not-allowed !important;
          background-color: #eaeaea;
          color: #888;
        }

        .dot.click {
          transition: all 200ms ease;
        }

        .dot:hover {
          cursor: grab;
        }

        .dot:active {
          cursor: grabbing;
        }
      </style></div><style>
        .slider {
          width: 100%;
          height: 0.5rem;
          border-radius: 50px;
          background-color: #f5a623;
          position: relative;
          cursor: pointer;
        }
      </style></div><div class=\\"slider \\"><div class=\\"dot  \\">0<style>
        .dot {
          position: absolute;
          left: 0%;
          top: 50%;
          transform: translate(-50%, -50%);
          height: 1.25rem;
          min-width: 1.25rem;
          line-height: 1.25rem;
          border-radius: 0.625rem;
          user-select: none;
          font-weight: 700;
          font-size: 0.75rem;
          z-index: 100;
          background-color: #0070f3;
          color: #fff;
          text-align: center;
          padding: 0 calc(0.86 * 8pt);
        }

        .dot.disabled {
          cursor: not-allowed !important;
          background-color: #eaeaea;
          color: #888;
        }

        .dot.click {
          transition: all 200ms ease;
        }

        .dot:hover {
          cursor: grab;
        }

        .dot:active {
          cursor: grabbing;
        }
      </style></div><style>
        .slider {
          width: 100%;
          height: 0.5rem;
          border-radius: 50px;
          background-color: #e00;
          position: relative;
          cursor: pointer;
        }
      </style></div></div>"
`;

exports[`Slider should work with hideValue 1`] = `
"<div class=\\"slider \\"><div class=\\"dot  \\"><style>
        .dot {
          position: absolute;
          left: 20%;
          top: 50%;
          transform: translate(-50%, -50%);
          height: 1.25rem;
          min-width: 1.25rem;
          line-height: 1.25rem;
          border-radius: 0.625rem;
          user-select: none;
          font-weight: 700;
          font-size: 0.75rem;
          z-index: 100;
          background-color: #0070f3;
          color: #fff;
          text-align: center;
          padding: 0 calc(0.86 * 8pt);
        }

        .dot.disabled {
          cursor: not-allowed !important;
          background-color: #eaeaea;
          color: #888;
        }

        .dot.click {
          transition: all 200ms ease;
        }

        .dot:hover {
          cursor: grab;
        }

        .dot:active {
          cursor: grabbing;
        }
      </style></div><style>
        .slider {
          width: 100%;
          height: 0.5rem;
          border-radius: 50px;
          background-color: #111;
          position: relative;
          cursor: pointer;
        }
      </style></div>"
`;

exports[`Slider should work with markers 1`] = `
"<div class=\\"slider \\"><div class=\\"dot  \\">0<style>
        .dot {
          position: absolute;
          left: 0%;
          top: 50%;
          transform: translate(-50%, -50%);
          height: 1.25rem;
          min-width: 1.25rem;
          line-height: 1.25rem;
          border-radius: 0.625rem;
          user-select: none;
          font-weight: 700;
          font-size: 0.75rem;
          z-index: 100;
          background-color: #0070f3;
          color: #fff;
          text-align: center;
          padding: 0 calc(0.86 * 8pt);
        }

        .dot.disabled {
          cursor: not-allowed !important;
          background-color: #eaeaea;
          color: #888;
        }

        .dot.click {
          transition: all 200ms ease;
        }

        .dot:hover {
          cursor: grab;
        }

        .dot:active {
          cursor: grabbing;
        }
      </style></div><span style=\\"left: 10%;\\"></span><span style=\\"left: 20%;\\"></span><span style=\\"left: 30%;\\"></span><span style=\\"left: 40%;\\"></span><span style=\\"left: 50%;\\"></span><span style=\\"left: 60%;\\"></span><span style=\\"left: 70%;\\"></span><span style=\\"left: 80%;\\"></span><span style=\\"left: 90%;\\"></span><style>
        span {
          position: absolute;
          width: 2px;
          height: 100%;
          top: 50%;
          transform: translate(-50%, -50%);
          background-color: #fff;
        }
      </style><style>
        .slider {
          width: 100%;
          height: 0.5rem;
          border-radius: 50px;
          background-color: #111;
          position: relative;
          cursor: pointer;
        }
      </style></div>"
`;

exports[`Slider should work with markers 2`] = `
"<div class=\\"slider \\"><div class=\\"dot  \\">0<style>
        .dot {
          position: absolute;
          left: 0%;
          top: 50%;
          transform: translate(-50%, -50%);
          height: 1.25rem;
          min-width: 1.25rem;
          line-height: 1.25rem;
          border-radius: 0.625rem;
          user-select: none;
          font-weight: 700;
          font-size: 0.75rem;
          z-index: 100;
          background-color: #0070f3;
          color: #fff;
          text-align: center;
          padding: 0 calc(0.86 * 8pt);
        }

        .dot.disabled {
          cursor: not-allowed !important;
          background-color: #eaeaea;
          color: #888;
        }

        .dot.click {
          transition: all 200ms ease;
        }

        .dot:hover {
          cursor: grab;
        }

        .dot:active {
          cursor: grabbing;
        }
      </style></div><span style=\\"left: 20%;\\"></span><span style=\\"left: 40%;\\"></span><span style=\\"left: 60%;\\"></span><span style=\\"left: 80%;\\"></span><style>
        span {
          position: absolute;
          width: 2px;
          height: 100%;
          top: 50%;
          transform: translate(-50%, -50%);
          background-color: #fff;
        }
      </style><style>
        .slider {
          width: 100%;
          height: 0.5rem;
          border-radius: 50px;
          background-color: #111;
          position: relative;
          cursor: pointer;
        }
      </style></div>"
`;
