// 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: calc(var(--slider-font-size) * 1.25);
            min-width: calc(var(--slider-font-size) * 1.25);
            line-height: calc(var(--slider-font-size) * 1.25);
            border-radius: calc(var(--slider-font-size) * 0.625);
            user-select: none;
            font-weight: 700;
            font-size: calc(var(--slider-font-size) * 0.75);
            z-index: 100;
            background-color: #0070f3;
            color: #fff;
            text-align: center;
            padding: 0 calc(0.57 * var(--slider-font-size));
          }

          .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 {
          border-radius: 50px;
          background-color: #111;
          position: relative;
          cursor: pointer;
          --slider-font-size: calc(1 * 16px);
          width: 100%;
          height: calc(0.5 * 16px);
          padding: 0 0 0 0;
          margin: 0 0 0 0;
        }
      </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: calc(var(--slider-font-size) * 1.25);
            min-width: calc(var(--slider-font-size) * 1.25);
            line-height: calc(var(--slider-font-size) * 1.25);
            border-radius: calc(var(--slider-font-size) * 0.625);
            user-select: none;
            font-weight: 700;
            font-size: calc(var(--slider-font-size) * 0.75);
            z-index: 100;
            background-color: #0070f3;
            color: #fff;
            text-align: center;
            padding: 0 calc(0.57 * var(--slider-font-size));
          }

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

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

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

          .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 {
          border-radius: 50px;
          background-color: #e00;
          position: relative;
          cursor: pointer;
          --slider-font-size: calc(1 * 16px);
          width: 100%;
          height: calc(0.5 * 16px);
          padding: 0 0 0 0;
          margin: 0 0 0 0;
        }
      </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: calc(var(--slider-font-size) * 1.25);
            min-width: calc(var(--slider-font-size) * 1.25);
            line-height: calc(var(--slider-font-size) * 1.25);
            border-radius: calc(var(--slider-font-size) * 0.625);
            user-select: none;
            font-weight: 700;
            font-size: calc(var(--slider-font-size) * 0.75);
            z-index: 100;
            background-color: #0070f3;
            color: #fff;
            text-align: center;
            padding: 0 calc(0.57 * var(--slider-font-size));
          }

          .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 {
          border-radius: 50px;
          background-color: #111;
          position: relative;
          cursor: pointer;
          --slider-font-size: calc(1 * 16px);
          width: 100%;
          height: calc(0.5 * 16px);
          padding: 0 0 0 0;
          margin: 0 0 0 0;
        }
      </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: calc(var(--slider-font-size) * 1.25);
            min-width: calc(var(--slider-font-size) * 1.25);
            line-height: calc(var(--slider-font-size) * 1.25);
            border-radius: calc(var(--slider-font-size) * 0.625);
            user-select: none;
            font-weight: 700;
            font-size: calc(var(--slider-font-size) * 0.75);
            z-index: 100;
            background-color: #0070f3;
            color: #fff;
            text-align: center;
            padding: 0 calc(0.57 * var(--slider-font-size));
          }

          .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 {
          border-radius: 50px;
          background-color: #111;
          position: relative;
          cursor: pointer;
          --slider-font-size: calc(1 * 16px);
          width: 100%;
          height: calc(0.5 * 16px);
          padding: 0 0 0 0;
          margin: 0 0 0 0;
        }
      </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: calc(var(--slider-font-size) * 1.25);
            min-width: calc(var(--slider-font-size) * 1.25);
            line-height: calc(var(--slider-font-size) * 1.25);
            border-radius: calc(var(--slider-font-size) * 0.625);
            user-select: none;
            font-weight: 700;
            font-size: calc(var(--slider-font-size) * 0.75);
            z-index: 100;
            background-color: #0070f3;
            color: #fff;
            text-align: center;
            padding: 0 calc(0.57 * var(--slider-font-size));
          }

          .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 {
          border-radius: 50px;
          background-color: #111;
          position: relative;
          cursor: pointer;
          --slider-font-size: calc(1 * 16px);
          width: 100%;
          height: calc(0.5 * 16px);
          padding: 0 0 0 0;
          margin: 0 0 0 0;
        }
      </style></div>"
`;
