@nypl/design-system-react-components 1.0.2 → 1.0.3-beta

package/src/components/Slider/__snapshots__/Slider.test.tsx.snap

@@ -1,2186 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Slider Range Slider renders the UI snapshot correctly 1`] = `
-<div
-  className="css-1u8qly9"
-  id="defaultRangeSlider-wrapper"
->
-  <label
-    className="css-1xdhyk6"
-    htmlFor="defaultRangeSlider-textInput-start"
-    id="defaultRangeSlider-label"
-  >
-    Label
-  </label>
-  <div
-    className="css-0"
-  >
-    <div
-      className="css-ho21zx"
-      id="defaultRangeSlider-textInput-start-wrapper"
-    >
-      <input
-        aria-label="Label - start value"
-        className="chakra-input css-0"
-        disabled={false}
-        id="defaultRangeSlider-textInput-start"
-        max={100}
-        min={0}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        required={false}
-        step={1}
-        type="number"
-        value="25"
-      />
-    </div>
-    <div
-      className="css-0"
-    >
-      0
-    </div>
-    <div
-      className="chakra-slider css-0"
-      id="slider-root-defaultRangeSlider"
-      style={
-        Object {
-          "WebkitTapHighlightColor": "rgba(0,0,0,0)",
-          "outline": 0,
-          "paddingBottom": 0,
-          "paddingTop": 0,
-          "position": "relative",
-          "touchAction": "none",
-          "userSelect": "none",
-        }
-      }
-      tabIndex={-1}
-    >
-      <div
-        className="chakra-slider__track css-0"
-        data-testid="chakra-range-slider-track"
-        id="slider-track-defaultRangeSlider"
-        style={
-          Object {
-            "position": "absolute",
-            "top": "50%",
-            "transform": "translateY(-50%)",
-            "width": "100%",
-          }
-        }
-      >
-        <div
-          className="chakra-slider__filled-track css-0"
-          id="slider-filled-track-defaultRangeSlider"
-          style={
-            Object {
-              "left": "25%",
-              "position": "absolute",
-              "top": "50%",
-              "transform": "translateY(-50%)",
-              "width": "50%",
-            }
-          }
-        />
-      </div>
-      <div
-        aria-labelledby="defaultRangeSlider-label"
-        aria-orientation="horizontal"
-        aria-valuemax={75}
-        aria-valuemin={0}
-        aria-valuenow={25}
-        className="chakra-slider__thumb css-0"
-        id="slider-thumb-defaultRangeSlider-0"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        role="slider"
-        style={
-          Object {
-            "MozUserSelect": "none",
-            "WebkitUserSelect": "none",
-            "left": "calc(25% - 0px)",
-            "msUserSelect": "none",
-            "position": "absolute",
-            "touchAction": "none",
-            "userSelect": "none",
-          }
-        }
-        tabIndex={0}
-      />
-      <div
-        aria-labelledby="defaultRangeSlider-label"
-        aria-orientation="horizontal"
-        aria-valuemax={100}
-        aria-valuemin={25}
-        aria-valuenow={75}
-        className="chakra-slider__thumb css-0"
-        id="slider-thumb-defaultRangeSlider-1"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        role="slider"
-        style={
-          Object {
-            "MozUserSelect": "none",
-            "WebkitUserSelect": "none",
-            "left": "calc(75% - 0px)",
-            "msUserSelect": "none",
-            "position": "absolute",
-            "touchAction": "none",
-            "userSelect": "none",
-          }
-        }
-        tabIndex={0}
-      />
-    </div>
-    <div
-      className="css-0"
-    >
-      100
-    </div>
-    <div
-      className="css-1f1uedm"
-      id="defaultRangeSlider-textInput-end-wrapper"
-    >
-      <input
-        aria-label="Label - end value"
-        className="chakra-input css-0"
-        disabled={false}
-        id="defaultRangeSlider-textInput-end"
-        max={100}
-        min={0}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        required={false}
-        step={1}
-        type="number"
-        value="75"
-      />
-    </div>
-  </div>
-  <div
-    aria-atomic={true}
-    aria-live="off"
-    className="css-1xdhyk6"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "Component helper text.",
-      }
-    }
-    data-isinvalid={false}
-    id="defaultRangeSlider-helperText"
-  />
-</div>
-`;
-
-exports[`Slider Range Slider renders the UI snapshot correctly 2`] = `
-<div
-  className="css-1u8qly9"
-  id="errored-wrapper"
->
-  <label
-    className="css-1xdhyk6"
-    htmlFor="errored-textInput-start"
-    id="errored-label"
-  >
-    Label
-  </label>
-  <div
-    className="css-0"
-  >
-    <div
-      className="css-ho21zx"
-      id="errored-textInput-start-wrapper"
-    >
-      <input
-        aria-invalid={true}
-        aria-label="Label - start value - There is an error related to this field."
-        className="chakra-input css-0"
-        disabled={false}
-        id="errored-textInput-start"
-        max={100}
-        min={0}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        required={false}
-        step={1}
-        type="number"
-        value="25"
-      />
-    </div>
-    <div
-      className="css-0"
-    >
-      0
-    </div>
-    <div
-      className="chakra-slider css-0"
-      id="slider-root-errored"
-      style={
-        Object {
-          "WebkitTapHighlightColor": "rgba(0,0,0,0)",
-          "outline": 0,
-          "paddingBottom": 0,
-          "paddingTop": 0,
-          "position": "relative",
-          "touchAction": "none",
-          "userSelect": "none",
-        }
-      }
-      tabIndex={-1}
-    >
-      <div
-        className="chakra-slider__track css-0"
-        data-testid="chakra-range-slider-track"
-        id="slider-track-errored"
-        style={
-          Object {
-            "position": "absolute",
-            "top": "50%",
-            "transform": "translateY(-50%)",
-            "width": "100%",
-          }
-        }
-      >
-        <div
-          className="chakra-slider__filled-track css-0"
-          id="slider-filled-track-errored"
-          style={
-            Object {
-              "left": "25%",
-              "position": "absolute",
-              "top": "50%",
-              "transform": "translateY(-50%)",
-              "width": "50%",
-            }
-          }
-        />
-      </div>
-      <div
-        aria-labelledby="errored-label"
-        aria-orientation="horizontal"
-        aria-valuemax={75}
-        aria-valuemin={0}
-        aria-valuenow={25}
-        className="chakra-slider__thumb css-0"
-        id="slider-thumb-errored-0"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        role="slider"
-        style={
-          Object {
-            "MozUserSelect": "none",
-            "WebkitUserSelect": "none",
-            "left": "calc(25% - 0px)",
-            "msUserSelect": "none",
-            "position": "absolute",
-            "touchAction": "none",
-            "userSelect": "none",
-          }
-        }
-        tabIndex={0}
-      />
-      <div
-        aria-labelledby="errored-label"
-        aria-orientation="horizontal"
-        aria-valuemax={100}
-        aria-valuemin={25}
-        aria-valuenow={75}
-        className="chakra-slider__thumb css-0"
-        id="slider-thumb-errored-1"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        role="slider"
-        style={
-          Object {
-            "MozUserSelect": "none",
-            "WebkitUserSelect": "none",
-            "left": "calc(75% - 0px)",
-            "msUserSelect": "none",
-            "position": "absolute",
-            "touchAction": "none",
-            "userSelect": "none",
-          }
-        }
-        tabIndex={0}
-      />
-    </div>
-    <div
-      className="css-0"
-    >
-      100
-    </div>
-    <div
-      className="css-1f1uedm"
-      id="errored-textInput-end-wrapper"
-    >
-      <input
-        aria-invalid={true}
-        aria-label="Label - end value - There is an error related to this field."
-        className="chakra-input css-0"
-        disabled={false}
-        id="errored-textInput-end"
-        max={100}
-        min={0}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        required={false}
-        step={1}
-        type="number"
-        value="75"
-      />
-    </div>
-  </div>
-  <div
-    aria-atomic={true}
-    aria-live="polite"
-    className="css-1xdhyk6"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "Component error text :(",
-      }
-    }
-    data-isinvalid={true}
-    id="errored-helperText"
-  />
-</div>
-`;
-
-exports[`Slider Range Slider renders the UI snapshot correctly 3`] = `
-<div
-  className="css-1u8qly9"
-  id="required-wrapper"
->
-  <label
-    className="css-1xdhyk6"
-    htmlFor="required-textInput-start"
-    id="required-label"
-  >
-    Label
-    <span>
-       (Required)
-    </span>
-  </label>
-  <div
-    className="css-0"
-  >
-    <div
-      className="css-ho21zx"
-      id="required-textInput-start-wrapper"
-    >
-      <input
-        aria-label="Label - start value"
-        aria-required={true}
-        className="chakra-input css-0"
-        disabled={false}
-        id="required-textInput-start"
-        max={100}
-        min={0}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        required={true}
-        step={1}
-        type="number"
-        value="25"
-      />
-    </div>
-    <div
-      className="css-0"
-    >
-      0
-    </div>
-    <div
-      className="chakra-slider css-0"
-      id="slider-root-required"
-      style={
-        Object {
-          "WebkitTapHighlightColor": "rgba(0,0,0,0)",
-          "outline": 0,
-          "paddingBottom": 0,
-          "paddingTop": 0,
-          "position": "relative",
-          "touchAction": "none",
-          "userSelect": "none",
-        }
-      }
-      tabIndex={-1}
-    >
-      <div
-        className="chakra-slider__track css-0"
-        data-testid="chakra-range-slider-track"
-        id="slider-track-required"
-        style={
-          Object {
-            "position": "absolute",
-            "top": "50%",
-            "transform": "translateY(-50%)",
-            "width": "100%",
-          }
-        }
-      >
-        <div
-          className="chakra-slider__filled-track css-0"
-          id="slider-filled-track-required"
-          style={
-            Object {
-              "left": "25%",
-              "position": "absolute",
-              "top": "50%",
-              "transform": "translateY(-50%)",
-              "width": "50%",
-            }
-          }
-        />
-      </div>
-      <div
-        aria-labelledby="required-label"
-        aria-orientation="horizontal"
-        aria-valuemax={75}
-        aria-valuemin={0}
-        aria-valuenow={25}
-        className="chakra-slider__thumb css-0"
-        id="slider-thumb-required-0"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        role="slider"
-        style={
-          Object {
-            "MozUserSelect": "none",
-            "WebkitUserSelect": "none",
-            "left": "calc(25% - 0px)",
-            "msUserSelect": "none",
-            "position": "absolute",
-            "touchAction": "none",
-            "userSelect": "none",
-          }
-        }
-        tabIndex={0}
-      />
-      <div
-        aria-labelledby="required-label"
-        aria-orientation="horizontal"
-        aria-valuemax={100}
-        aria-valuemin={25}
-        aria-valuenow={75}
-        className="chakra-slider__thumb css-0"
-        id="slider-thumb-required-1"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        role="slider"
-        style={
-          Object {
-            "MozUserSelect": "none",
-            "WebkitUserSelect": "none",
-            "left": "calc(75% - 0px)",
-            "msUserSelect": "none",
-            "position": "absolute",
-            "touchAction": "none",
-            "userSelect": "none",
-          }
-        }
-        tabIndex={0}
-      />
-    </div>
-    <div
-      className="css-0"
-    >
-      100
-    </div>
-    <div
-      className="css-1f1uedm"
-      id="required-textInput-end-wrapper"
-    >
-      <input
-        aria-label="Label - end value"
-        aria-required={true}
-        className="chakra-input css-0"
-        disabled={false}
-        id="required-textInput-end"
-        max={100}
-        min={0}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        required={true}
-        step={1}
-        type="number"
-        value="75"
-      />
-    </div>
-  </div>
-  <div
-    aria-atomic={true}
-    aria-live="off"
-    className="css-1xdhyk6"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "Component helper text.",
-      }
-    }
-    data-isinvalid={false}
-    id="required-helperText"
-  />
-</div>
-`;
-
-exports[`Slider Range Slider renders the UI snapshot correctly 4`] = `
-<div
-  className="css-1u8qly9"
-  id="disabled-wrapper"
->
-  <label
-    className="css-1xdhyk6"
-    htmlFor="disabled-textInput-start"
-    id="disabled-label"
-  >
-    Label
-  </label>
-  <div
-    className="css-0"
-  >
-    <div
-      className="css-ho21zx"
-      id="disabled-textInput-start-wrapper"
-    >
-      <input
-        aria-label="Label - start value"
-        className="chakra-input css-0"
-        disabled={true}
-        id="disabled-textInput-start"
-        max={100}
-        min={0}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        required={false}
-        step={1}
-        type="number"
-        value="25"
-      />
-    </div>
-    <div
-      className="css-0"
-    >
-      0
-    </div>
-    <div
-      aria-disabled={true}
-      className="chakra-slider css-0"
-      id="slider-root-disabled"
-      style={
-        Object {
-          "WebkitTapHighlightColor": "rgba(0,0,0,0)",
-          "outline": 0,
-          "paddingBottom": 0,
-          "paddingTop": 0,
-          "position": "relative",
-          "touchAction": "none",
-          "userSelect": "none",
-        }
-      }
-      tabIndex={-1}
-    >
-      <div
-        className="chakra-slider__track css-0"
-        data-disabled=""
-        data-testid="chakra-range-slider-track"
-        id="slider-track-disabled"
-        style={
-          Object {
-            "position": "absolute",
-            "top": "50%",
-            "transform": "translateY(-50%)",
-            "width": "100%",
-          }
-        }
-      >
-        <div
-          className="chakra-slider__filled-track css-0"
-          id="slider-filled-track-disabled"
-          style={
-            Object {
-              "left": "25%",
-              "position": "absolute",
-              "top": "50%",
-              "transform": "translateY(-50%)",
-              "width": "50%",
-            }
-          }
-        />
-      </div>
-      <div
-        aria-disabled={true}
-        aria-labelledby="disabled-label"
-        aria-orientation="horizontal"
-        aria-valuemax={75}
-        aria-valuemin={0}
-        aria-valuenow={25}
-        className="chakra-slider__thumb css-0"
-        id="slider-thumb-disabled-0"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        role="slider"
-        style={
-          Object {
-            "MozUserSelect": "none",
-            "WebkitUserSelect": "none",
-            "left": "calc(25% - 0px)",
-            "msUserSelect": "none",
-            "position": "absolute",
-            "touchAction": "none",
-            "userSelect": "none",
-          }
-        }
-      />
-      <div
-        aria-disabled={true}
-        aria-labelledby="disabled-label"
-        aria-orientation="horizontal"
-        aria-valuemax={100}
-        aria-valuemin={25}
-        aria-valuenow={75}
-        className="chakra-slider__thumb css-0"
-        id="slider-thumb-disabled-1"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        role="slider"
-        style={
-          Object {
-            "MozUserSelect": "none",
-            "WebkitUserSelect": "none",
-            "left": "calc(75% - 0px)",
-            "msUserSelect": "none",
-            "position": "absolute",
-            "touchAction": "none",
-            "userSelect": "none",
-          }
-        }
-      />
-    </div>
-    <div
-      className="css-0"
-    >
-      100
-    </div>
-    <div
-      className="css-1f1uedm"
-      id="disabled-textInput-end-wrapper"
-    >
-      <input
-        aria-label="Label - end value"
-        className="chakra-input css-0"
-        disabled={true}
-        id="disabled-textInput-end"
-        max={100}
-        min={0}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        required={false}
-        step={1}
-        type="number"
-        value="75"
-      />
-    </div>
-  </div>
-  <div
-    aria-atomic={true}
-    aria-live="off"
-    className="css-1xdhyk6"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "Component helper text.",
-      }
-    }
-    data-isinvalid={false}
-    id="disabled-helperText"
-  />
-</div>
-`;
-
-exports[`Slider Range Slider renders the UI snapshot correctly 5`] = `
-<div
-  className="css-1u8qly9"
-  id="noLabels-wrapper"
->
-  <div
-    className="css-0"
-  >
-    <div
-      className="css-ho21zx"
-      id="noLabels-textInput-start-wrapper"
-    >
-      <input
-        aria-label="Label - start value"
-        className="chakra-input css-0"
-        disabled={false}
-        id="noLabels-textInput-start"
-        max={100}
-        min={0}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        required={false}
-        step={1}
-        type="number"
-        value="25"
-      />
-    </div>
-    <div
-      className="css-0"
-    >
-      0
-    </div>
-    <div
-      className="chakra-slider css-0"
-      id="slider-root-noLabels"
-      style={
-        Object {
-          "WebkitTapHighlightColor": "rgba(0,0,0,0)",
-          "outline": 0,
-          "paddingBottom": 0,
-          "paddingTop": 0,
-          "position": "relative",
-          "touchAction": "none",
-          "userSelect": "none",
-        }
-      }
-      tabIndex={-1}
-    >
-      <div
-        className="chakra-slider__track css-0"
-        data-testid="chakra-range-slider-track"
-        id="slider-track-noLabels"
-        style={
-          Object {
-            "position": "absolute",
-            "top": "50%",
-            "transform": "translateY(-50%)",
-            "width": "100%",
-          }
-        }
-      >
-        <div
-          className="chakra-slider__filled-track css-0"
-          id="slider-filled-track-noLabels"
-          style={
-            Object {
-              "left": "25%",
-              "position": "absolute",
-              "top": "50%",
-              "transform": "translateY(-50%)",
-              "width": "50%",
-            }
-          }
-        />
-      </div>
-      <div
-        aria-label="Label - start value"
-        aria-orientation="horizontal"
-        aria-valuemax={75}
-        aria-valuemin={0}
-        aria-valuenow={25}
-        className="chakra-slider__thumb css-0"
-        id="slider-thumb-noLabels-0"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        role="slider"
-        style={
-          Object {
-            "MozUserSelect": "none",
-            "WebkitUserSelect": "none",
-            "left": "calc(25% - 0px)",
-            "msUserSelect": "none",
-            "position": "absolute",
-            "touchAction": "none",
-            "userSelect": "none",
-          }
-        }
-        tabIndex={0}
-      />
-      <div
-        aria-label="Label - end value"
-        aria-orientation="horizontal"
-        aria-valuemax={100}
-        aria-valuemin={25}
-        aria-valuenow={75}
-        className="chakra-slider__thumb css-0"
-        id="slider-thumb-noLabels-1"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        role="slider"
-        style={
-          Object {
-            "MozUserSelect": "none",
-            "WebkitUserSelect": "none",
-            "left": "calc(75% - 0px)",
-            "msUserSelect": "none",
-            "position": "absolute",
-            "touchAction": "none",
-            "userSelect": "none",
-          }
-        }
-        tabIndex={0}
-      />
-    </div>
-    <div
-      className="css-0"
-    >
-      100
-    </div>
-    <div
-      className="css-1f1uedm"
-      id="noLabels-textInput-end-wrapper"
-    >
-      <input
-        aria-label="Label - end value"
-        className="chakra-input css-0"
-        disabled={false}
-        id="noLabels-textInput-end"
-        max={100}
-        min={0}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        required={false}
-        step={1}
-        type="number"
-        value="75"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Slider Range Slider renders the UI snapshot correctly 6`] = `
-<div
-  className="css-1u8qly9"
-  id="noVisibleValues-wrapper"
->
-  <label
-    className="css-1xdhyk6"
-    htmlFor=""
-    id="noVisibleValues-label"
-  >
-    Label
-  </label>
-  <div
-    className="css-0"
-  >
-    <div
-      className="chakra-slider css-0"
-      id="slider-root-noVisibleValues"
-      style={
-        Object {
-          "WebkitTapHighlightColor": "rgba(0,0,0,0)",
-          "outline": 0,
-          "paddingBottom": 0,
-          "paddingTop": 0,
-          "position": "relative",
-          "touchAction": "none",
-          "userSelect": "none",
-        }
-      }
-      tabIndex={-1}
-    >
-      <div
-        className="chakra-slider__track css-0"
-        data-testid="chakra-range-slider-track"
-        id="slider-track-noVisibleValues"
-        style={
-          Object {
-            "position": "absolute",
-            "top": "50%",
-            "transform": "translateY(-50%)",
-            "width": "100%",
-          }
-        }
-      >
-        <div
-          className="chakra-slider__filled-track css-0"
-          id="slider-filled-track-noVisibleValues"
-          style={
-            Object {
-              "left": "25%",
-              "position": "absolute",
-              "top": "50%",
-              "transform": "translateY(-50%)",
-              "width": "50%",
-            }
-          }
-        />
-      </div>
-      <div
-        aria-labelledby="noVisibleValues-label"
-        aria-orientation="horizontal"
-        aria-valuemax={75}
-        aria-valuemin={0}
-        aria-valuenow={25}
-        className="chakra-slider__thumb css-0"
-        id="slider-thumb-noVisibleValues-0"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        role="slider"
-        style={
-          Object {
-            "MozUserSelect": "none",
-            "WebkitUserSelect": "none",
-            "left": "calc(25% - 0px)",
-            "msUserSelect": "none",
-            "position": "absolute",
-            "touchAction": "none",
-            "userSelect": "none",
-          }
-        }
-        tabIndex={0}
-      />
-      <div
-        aria-labelledby="noVisibleValues-label"
-        aria-orientation="horizontal"
-        aria-valuemax={100}
-        aria-valuemin={25}
-        aria-valuenow={75}
-        className="chakra-slider__thumb css-0"
-        id="slider-thumb-noVisibleValues-1"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        role="slider"
-        style={
-          Object {
-            "MozUserSelect": "none",
-            "WebkitUserSelect": "none",
-            "left": "calc(75% - 0px)",
-            "msUserSelect": "none",
-            "position": "absolute",
-            "touchAction": "none",
-            "userSelect": "none",
-          }
-        }
-        tabIndex={0}
-      />
-    </div>
-  </div>
-  <div
-    aria-atomic={true}
-    aria-live="off"
-    className="css-1xdhyk6"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "Component helper text.",
-      }
-    }
-    data-isinvalid={false}
-    id="noVisibleValues-helperText"
-  />
-</div>
-`;
-
-exports[`Slider Range Slider renders the UI snapshot correctly 7`] = `
-<div
-  className="css-1u8qly9"
-  id="onlySlider-wrapper"
->
-  <div
-    className="css-0"
-  >
-    <div
-      className="chakra-slider css-0"
-      id="slider-root-onlySlider"
-      style={
-        Object {
-          "WebkitTapHighlightColor": "rgba(0,0,0,0)",
-          "outline": 0,
-          "paddingBottom": 0,
-          "paddingTop": 0,
-          "position": "relative",
-          "touchAction": "none",
-          "userSelect": "none",
-        }
-      }
-      tabIndex={-1}
-    >
-      <div
-        className="chakra-slider__track css-0"
-        data-testid="chakra-range-slider-track"
-        id="slider-track-onlySlider"
-        style={
-          Object {
-            "position": "absolute",
-            "top": "50%",
-            "transform": "translateY(-50%)",
-            "width": "100%",
-          }
-        }
-      >
-        <div
-          className="chakra-slider__filled-track css-0"
-          id="slider-filled-track-onlySlider"
-          style={
-            Object {
-              "left": "25%",
-              "position": "absolute",
-              "top": "50%",
-              "transform": "translateY(-50%)",
-              "width": "50%",
-            }
-          }
-        />
-      </div>
-      <div
-        aria-label="Label - start value"
-        aria-orientation="horizontal"
-        aria-valuemax={75}
-        aria-valuemin={0}
-        aria-valuenow={25}
-        className="chakra-slider__thumb css-0"
-        id="slider-thumb-onlySlider-0"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        role="slider"
-        style={
-          Object {
-            "MozUserSelect": "none",
-            "WebkitUserSelect": "none",
-            "left": "calc(25% - 0px)",
-            "msUserSelect": "none",
-            "position": "absolute",
-            "touchAction": "none",
-            "userSelect": "none",
-          }
-        }
-        tabIndex={0}
-      />
-      <div
-        aria-label="Label - end value"
-        aria-orientation="horizontal"
-        aria-valuemax={100}
-        aria-valuemin={25}
-        aria-valuenow={75}
-        className="chakra-slider__thumb css-0"
-        id="slider-thumb-onlySlider-1"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        role="slider"
-        style={
-          Object {
-            "MozUserSelect": "none",
-            "WebkitUserSelect": "none",
-            "left": "calc(75% - 0px)",
-            "msUserSelect": "none",
-            "position": "absolute",
-            "touchAction": "none",
-            "userSelect": "none",
-          }
-        }
-        tabIndex={0}
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Slider Single Slider renders the UI snapshot correctly 1`] = `
-<div
-  className="css-1u8qly9"
-  id="defaultSlider-wrapper"
->
-  <label
-    className="css-1xdhyk6"
-    htmlFor="defaultSlider-textInput-end"
-    id="defaultSlider-label"
-  >
-    Label
-  </label>
-  <div
-    className="css-0"
-  >
-    <div
-      className="css-0"
-    >
-      0
-    </div>
-    <div
-      className="chakra-slider css-0"
-      style={
-        Object {
-          "WebkitTapHighlightColor": "rgba(0,0,0,0)",
-          "outline": 0,
-          "paddingBottom": 0,
-          "paddingTop": 0,
-          "position": "relative",
-          "touchAction": "none",
-          "userSelect": "none",
-        }
-      }
-      tabIndex={-1}
-    >
-      <div
-        className="chakra-slider__track css-0"
-        id="slider-track-defaultSlider"
-        style={
-          Object {
-            "position": "absolute",
-            "top": "50%",
-            "transform": "translateY(-50%)",
-            "width": "100%",
-          }
-        }
-      >
-        <div
-          className="chakra-slider__filled-track css-0"
-          style={
-            Object {
-              "left": "0%",
-              "position": "absolute",
-              "top": "50%",
-              "transform": "translateY(-50%)",
-              "width": "50%",
-            }
-          }
-        />
-      </div>
-      <div
-        aria-labelledby="defaultSlider-label"
-        aria-orientation="horizontal"
-        aria-valuemax={100}
-        aria-valuemin={0}
-        aria-valuenow={50}
-        className="chakra-slider__thumb css-0"
-        id="slider-thumb-defaultSlider"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        role="slider"
-        style={
-          Object {
-            "MozUserSelect": "none",
-            "WebkitUserSelect": "none",
-            "left": "calc(50% - 0px)",
-            "msUserSelect": "none",
-            "position": "absolute",
-            "touchAction": "none",
-            "userSelect": "none",
-          }
-        }
-        tabIndex={0}
-      />
-      <input
-        type="hidden"
-        value={50}
-      />
-    </div>
-    <div
-      className="css-0"
-    >
-      100
-    </div>
-    <div
-      className="css-1f1uedm"
-      id="defaultSlider-textInput-end-wrapper"
-    >
-      <input
-        aria-label="Label"
-        className="chakra-input css-0"
-        disabled={false}
-        id="defaultSlider-textInput-end"
-        max={100}
-        min={0}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        required={false}
-        step={1}
-        type="number"
-        value="50"
-      />
-    </div>
-  </div>
-  <div
-    aria-atomic={true}
-    aria-live="off"
-    className="css-1xdhyk6"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "Component helper text.",
-      }
-    }
-    data-isinvalid={false}
-    id="defaultSlider-helperText"
-  />
-</div>
-`;
-
-exports[`Slider Single Slider renders the UI snapshot correctly 2`] = `
-<div
-  className="css-1u8qly9"
-  id="errored-wrapper"
->
-  <label
-    className="css-1xdhyk6"
-    htmlFor="errored-textInput-end"
-    id="errored-label"
-  >
-    Label
-  </label>
-  <div
-    className="css-0"
-  >
-    <div
-      className="css-0"
-    >
-      0
-    </div>
-    <div
-      className="chakra-slider css-0"
-      style={
-        Object {
-          "WebkitTapHighlightColor": "rgba(0,0,0,0)",
-          "outline": 0,
-          "paddingBottom": 0,
-          "paddingTop": 0,
-          "position": "relative",
-          "touchAction": "none",
-          "userSelect": "none",
-        }
-      }
-      tabIndex={-1}
-    >
-      <div
-        className="chakra-slider__track css-0"
-        id="slider-track-errored"
-        style={
-          Object {
-            "position": "absolute",
-            "top": "50%",
-            "transform": "translateY(-50%)",
-            "width": "100%",
-          }
-        }
-      >
-        <div
-          className="chakra-slider__filled-track css-0"
-          style={
-            Object {
-              "left": "0%",
-              "position": "absolute",
-              "top": "50%",
-              "transform": "translateY(-50%)",
-              "width": "50%",
-            }
-          }
-        />
-      </div>
-      <div
-        aria-labelledby="errored-label"
-        aria-orientation="horizontal"
-        aria-valuemax={100}
-        aria-valuemin={0}
-        aria-valuenow={50}
-        className="chakra-slider__thumb css-0"
-        id="slider-thumb-errored"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        role="slider"
-        style={
-          Object {
-            "MozUserSelect": "none",
-            "WebkitUserSelect": "none",
-            "left": "calc(50% - 0px)",
-            "msUserSelect": "none",
-            "position": "absolute",
-            "touchAction": "none",
-            "userSelect": "none",
-          }
-        }
-        tabIndex={0}
-      />
-      <input
-        type="hidden"
-        value={50}
-      />
-    </div>
-    <div
-      className="css-0"
-    >
-      100
-    </div>
-    <div
-      className="css-1f1uedm"
-      id="errored-textInput-end-wrapper"
-    >
-      <input
-        aria-invalid={true}
-        aria-label="Label - There is an error related to this field."
-        className="chakra-input css-0"
-        disabled={false}
-        id="errored-textInput-end"
-        max={100}
-        min={0}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        required={false}
-        step={1}
-        type="number"
-        value="50"
-      />
-    </div>
-  </div>
-  <div
-    aria-atomic={true}
-    aria-live="polite"
-    className="css-1xdhyk6"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "Component error text :(",
-      }
-    }
-    data-isinvalid={true}
-    id="errored-helperText"
-  />
-</div>
-`;
-
-exports[`Slider Single Slider renders the UI snapshot correctly 3`] = `
-<div
-  className="css-1u8qly9"
-  id="required-wrapper"
->
-  <label
-    className="css-1xdhyk6"
-    htmlFor="required-textInput-end"
-    id="required-label"
-  >
-    Label
-    <span>
-       (Required)
-    </span>
-  </label>
-  <div
-    className="css-0"
-  >
-    <div
-      className="css-0"
-    >
-      0
-    </div>
-    <div
-      className="chakra-slider css-0"
-      style={
-        Object {
-          "WebkitTapHighlightColor": "rgba(0,0,0,0)",
-          "outline": 0,
-          "paddingBottom": 0,
-          "paddingTop": 0,
-          "position": "relative",
-          "touchAction": "none",
-          "userSelect": "none",
-        }
-      }
-      tabIndex={-1}
-    >
-      <div
-        className="chakra-slider__track css-0"
-        id="slider-track-required"
-        style={
-          Object {
-            "position": "absolute",
-            "top": "50%",
-            "transform": "translateY(-50%)",
-            "width": "100%",
-          }
-        }
-      >
-        <div
-          className="chakra-slider__filled-track css-0"
-          style={
-            Object {
-              "left": "0%",
-              "position": "absolute",
-              "top": "50%",
-              "transform": "translateY(-50%)",
-              "width": "50%",
-            }
-          }
-        />
-      </div>
-      <div
-        aria-labelledby="required-label"
-        aria-orientation="horizontal"
-        aria-valuemax={100}
-        aria-valuemin={0}
-        aria-valuenow={50}
-        className="chakra-slider__thumb css-0"
-        id="slider-thumb-required"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        role="slider"
-        style={
-          Object {
-            "MozUserSelect": "none",
-            "WebkitUserSelect": "none",
-            "left": "calc(50% - 0px)",
-            "msUserSelect": "none",
-            "position": "absolute",
-            "touchAction": "none",
-            "userSelect": "none",
-          }
-        }
-        tabIndex={0}
-      />
-      <input
-        type="hidden"
-        value={50}
-      />
-    </div>
-    <div
-      className="css-0"
-    >
-      100
-    </div>
-    <div
-      className="css-1f1uedm"
-      id="required-textInput-end-wrapper"
-    >
-      <input
-        aria-label="Label"
-        aria-required={true}
-        className="chakra-input css-0"
-        disabled={false}
-        id="required-textInput-end"
-        max={100}
-        min={0}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        required={true}
-        step={1}
-        type="number"
-        value="50"
-      />
-    </div>
-  </div>
-  <div
-    aria-atomic={true}
-    aria-live="off"
-    className="css-1xdhyk6"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "Component helper text.",
-      }
-    }
-    data-isinvalid={false}
-    id="required-helperText"
-  />
-</div>
-`;
-
-exports[`Slider Single Slider renders the UI snapshot correctly 4`] = `
-<div
-  className="css-1u8qly9"
-  id="disabled-wrapper"
->
-  <label
-    className="css-1xdhyk6"
-    htmlFor="disabled-textInput-end"
-    id="disabled-label"
-  >
-    Label
-  </label>
-  <div
-    className="css-0"
-  >
-    <div
-      className="css-0"
-    >
-      0
-    </div>
-    <div
-      aria-disabled={true}
-      className="chakra-slider css-0"
-      style={
-        Object {
-          "WebkitTapHighlightColor": "rgba(0,0,0,0)",
-          "outline": 0,
-          "paddingBottom": 0,
-          "paddingTop": 0,
-          "position": "relative",
-          "touchAction": "none",
-          "userSelect": "none",
-        }
-      }
-      tabIndex={-1}
-    >
-      <div
-        className="chakra-slider__track css-0"
-        data-disabled=""
-        id="slider-track-disabled"
-        style={
-          Object {
-            "position": "absolute",
-            "top": "50%",
-            "transform": "translateY(-50%)",
-            "width": "100%",
-          }
-        }
-      >
-        <div
-          className="chakra-slider__filled-track css-0"
-          style={
-            Object {
-              "left": "0%",
-              "position": "absolute",
-              "top": "50%",
-              "transform": "translateY(-50%)",
-              "width": "50%",
-            }
-          }
-        />
-      </div>
-      <div
-        aria-disabled={true}
-        aria-labelledby="disabled-label"
-        aria-orientation="horizontal"
-        aria-valuemax={100}
-        aria-valuemin={0}
-        aria-valuenow={50}
-        className="chakra-slider__thumb css-0"
-        id="slider-thumb-disabled"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        role="slider"
-        style={
-          Object {
-            "MozUserSelect": "none",
-            "WebkitUserSelect": "none",
-            "left": "calc(50% - 0px)",
-            "msUserSelect": "none",
-            "position": "absolute",
-            "touchAction": "none",
-            "userSelect": "none",
-          }
-        }
-      />
-      <input
-        type="hidden"
-        value={50}
-      />
-    </div>
-    <div
-      className="css-0"
-    >
-      100
-    </div>
-    <div
-      className="css-1f1uedm"
-      id="disabled-textInput-end-wrapper"
-    >
-      <input
-        aria-label="Label"
-        className="chakra-input css-0"
-        disabled={true}
-        id="disabled-textInput-end"
-        max={100}
-        min={0}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        required={false}
-        step={1}
-        type="number"
-        value="50"
-      />
-    </div>
-  </div>
-  <div
-    aria-atomic={true}
-    aria-live="off"
-    className="css-1xdhyk6"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "Component helper text.",
-      }
-    }
-    data-isinvalid={false}
-    id="disabled-helperText"
-  />
-</div>
-`;
-
-exports[`Slider Single Slider renders the UI snapshot correctly 5`] = `
-<div
-  className="css-1u8qly9"
-  id="noLabels-wrapper"
->
-  <div
-    className="css-0"
-  >
-    <div
-      className="css-0"
-    >
-      0
-    </div>
-    <div
-      className="chakra-slider css-0"
-      style={
-        Object {
-          "WebkitTapHighlightColor": "rgba(0,0,0,0)",
-          "outline": 0,
-          "paddingBottom": 0,
-          "paddingTop": 0,
-          "position": "relative",
-          "touchAction": "none",
-          "userSelect": "none",
-        }
-      }
-      tabIndex={-1}
-    >
-      <div
-        className="chakra-slider__track css-0"
-        id="slider-track-noLabels"
-        style={
-          Object {
-            "position": "absolute",
-            "top": "50%",
-            "transform": "translateY(-50%)",
-            "width": "100%",
-          }
-        }
-      >
-        <div
-          className="chakra-slider__filled-track css-0"
-          style={
-            Object {
-              "left": "0%",
-              "position": "absolute",
-              "top": "50%",
-              "transform": "translateY(-50%)",
-              "width": "50%",
-            }
-          }
-        />
-      </div>
-      <div
-        aria-label="Label"
-        aria-orientation="horizontal"
-        aria-valuemax={100}
-        aria-valuemin={0}
-        aria-valuenow={50}
-        className="chakra-slider__thumb css-0"
-        id="slider-thumb-noLabels"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        role="slider"
-        style={
-          Object {
-            "MozUserSelect": "none",
-            "WebkitUserSelect": "none",
-            "left": "calc(50% - 0px)",
-            "msUserSelect": "none",
-            "position": "absolute",
-            "touchAction": "none",
-            "userSelect": "none",
-          }
-        }
-        tabIndex={0}
-      />
-      <input
-        type="hidden"
-        value={50}
-      />
-    </div>
-    <div
-      className="css-0"
-    >
-      100
-    </div>
-    <div
-      className="css-1f1uedm"
-      id="noLabels-textInput-end-wrapper"
-    >
-      <input
-        aria-label="Label"
-        className="chakra-input css-0"
-        disabled={false}
-        id="noLabels-textInput-end"
-        max={100}
-        min={0}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        required={false}
-        step={1}
-        type="number"
-        value="50"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Slider Single Slider renders the UI snapshot correctly 6`] = `
-<div
-  className="css-1u8qly9"
-  id="noVisibleValues-wrapper"
->
-  <label
-    className="css-1xdhyk6"
-    htmlFor=""
-    id="noVisibleValues-label"
-  >
-    Label
-  </label>
-  <div
-    className="css-0"
-  >
-    <div
-      className="chakra-slider css-0"
-      style={
-        Object {
-          "WebkitTapHighlightColor": "rgba(0,0,0,0)",
-          "outline": 0,
-          "paddingBottom": 0,
-          "paddingTop": 0,
-          "position": "relative",
-          "touchAction": "none",
-          "userSelect": "none",
-        }
-      }
-      tabIndex={-1}
-    >
-      <div
-        className="chakra-slider__track css-0"
-        id="slider-track-noVisibleValues"
-        style={
-          Object {
-            "position": "absolute",
-            "top": "50%",
-            "transform": "translateY(-50%)",
-            "width": "100%",
-          }
-        }
-      >
-        <div
-          className="chakra-slider__filled-track css-0"
-          style={
-            Object {
-              "left": "0%",
-              "position": "absolute",
-              "top": "50%",
-              "transform": "translateY(-50%)",
-              "width": "50%",
-            }
-          }
-        />
-      </div>
-      <div
-        aria-labelledby="noVisibleValues-label"
-        aria-orientation="horizontal"
-        aria-valuemax={100}
-        aria-valuemin={0}
-        aria-valuenow={50}
-        className="chakra-slider__thumb css-0"
-        id="slider-thumb-noVisibleValues"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        role="slider"
-        style={
-          Object {
-            "MozUserSelect": "none",
-            "WebkitUserSelect": "none",
-            "left": "calc(50% - 0px)",
-            "msUserSelect": "none",
-            "position": "absolute",
-            "touchAction": "none",
-            "userSelect": "none",
-          }
-        }
-        tabIndex={0}
-      />
-      <input
-        type="hidden"
-        value={50}
-      />
-    </div>
-  </div>
-  <div
-    aria-atomic={true}
-    aria-live="off"
-    className="css-1xdhyk6"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "Component helper text.",
-      }
-    }
-    data-isinvalid={false}
-    id="noVisibleValues-helperText"
-  />
-</div>
-`;
-
-exports[`Slider Single Slider renders the UI snapshot correctly 7`] = `
-<div
-  className="css-1u8qly9"
-  id="onlySlider-wrapper"
->
-  <div
-    className="css-0"
-  >
-    <div
-      className="chakra-slider css-0"
-      style={
-        Object {
-          "WebkitTapHighlightColor": "rgba(0,0,0,0)",
-          "outline": 0,
-          "paddingBottom": 0,
-          "paddingTop": 0,
-          "position": "relative",
-          "touchAction": "none",
-          "userSelect": "none",
-        }
-      }
-      tabIndex={-1}
-    >
-      <div
-        className="chakra-slider__track css-0"
-        id="slider-track-onlySlider"
-        style={
-          Object {
-            "position": "absolute",
-            "top": "50%",
-            "transform": "translateY(-50%)",
-            "width": "100%",
-          }
-        }
-      >
-        <div
-          className="chakra-slider__filled-track css-0"
-          style={
-            Object {
-              "left": "0%",
-              "position": "absolute",
-              "top": "50%",
-              "transform": "translateY(-50%)",
-              "width": "50%",
-            }
-          }
-        />
-      </div>
-      <div
-        aria-label="Label"
-        aria-orientation="horizontal"
-        aria-valuemax={100}
-        aria-valuemin={0}
-        aria-valuenow={50}
-        className="chakra-slider__thumb css-0"
-        id="slider-thumb-onlySlider"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        role="slider"
-        style={
-          Object {
-            "MozUserSelect": "none",
-            "WebkitUserSelect": "none",
-            "left": "calc(50% - 0px)",
-            "msUserSelect": "none",
-            "position": "absolute",
-            "touchAction": "none",
-            "userSelect": "none",
-          }
-        }
-        tabIndex={0}
-      />
-      <input
-        type="hidden"
-        value={50}
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Slider Single Slider renders the UI snapshot correctly 8`] = `
-<div
-  className="css-1y4kn3e"
-  id="chakra-wrapper"
->
-  <label
-    className="css-1xdhyk6"
-    htmlFor="chakra-textInput-end"
-    id="chakra-label"
-  >
-    Label
-  </label>
-  <div
-    className="css-0"
-  >
-    <div
-      className="css-0"
-    >
-      0
-    </div>
-    <div
-      className="chakra-slider css-0"
-      style={
-        Object {
-          "WebkitTapHighlightColor": "rgba(0,0,0,0)",
-          "outline": 0,
-          "paddingBottom": 0,
-          "paddingTop": 0,
-          "position": "relative",
-          "touchAction": "none",
-          "userSelect": "none",
-        }
-      }
-      tabIndex={-1}
-    >
-      <div
-        className="chakra-slider__track css-0"
-        id="slider-track-chakra"
-        style={
-          Object {
-            "position": "absolute",
-            "top": "50%",
-            "transform": "translateY(-50%)",
-            "width": "100%",
-          }
-        }
-      >
-        <div
-          className="chakra-slider__filled-track css-0"
-          style={
-            Object {
-              "left": "0%",
-              "position": "absolute",
-              "top": "50%",
-              "transform": "translateY(-50%)",
-              "width": "50%",
-            }
-          }
-        />
-      </div>
-      <div
-        aria-labelledby="chakra-label"
-        aria-orientation="horizontal"
-        aria-valuemax={100}
-        aria-valuemin={0}
-        aria-valuenow={50}
-        className="chakra-slider__thumb css-0"
-        id="slider-thumb-chakra"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        role="slider"
-        style={
-          Object {
-            "MozUserSelect": "none",
-            "WebkitUserSelect": "none",
-            "left": "calc(50% - 0px)",
-            "msUserSelect": "none",
-            "position": "absolute",
-            "touchAction": "none",
-            "userSelect": "none",
-          }
-        }
-        tabIndex={0}
-      />
-      <input
-        type="hidden"
-        value={50}
-      />
-    </div>
-    <div
-      className="css-0"
-    >
-      100
-    </div>
-    <div
-      className="css-1f1uedm"
-      id="chakra-textInput-end-wrapper"
-    >
-      <input
-        aria-label="Label"
-        className="chakra-input css-0"
-        disabled={false}
-        id="chakra-textInput-end"
-        max={100}
-        min={0}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        required={false}
-        step={1}
-        type="number"
-        value="50"
-      />
-    </div>
-  </div>
-  <div
-    aria-atomic={true}
-    aria-live="off"
-    className="css-1xdhyk6"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "Component helper text.",
-      }
-    }
-    data-isinvalid={false}
-    id="chakra-helperText"
-  />
-</div>
-`;
-
-exports[`Slider Single Slider renders the UI snapshot correctly 9`] = `
-<div
-  className="css-1u8qly9"
-  data-testid="props"
-  id="props-wrapper"
->
-  <label
-    className="css-1xdhyk6"
-    htmlFor="props-textInput-end"
-    id="props-label"
-  >
-    Label
-  </label>
-  <div
-    className="css-0"
-  >
-    <div
-      className="css-0"
-    >
-      0
-    </div>
-    <div
-      className="chakra-slider css-0"
-      style={
-        Object {
-          "WebkitTapHighlightColor": "rgba(0,0,0,0)",
-          "outline": 0,
-          "paddingBottom": 0,
-          "paddingTop": 0,
-          "position": "relative",
-          "touchAction": "none",
-          "userSelect": "none",
-        }
-      }
-      tabIndex={-1}
-    >
-      <div
-        className="chakra-slider__track css-0"
-        id="slider-track-props"
-        style={
-          Object {
-            "position": "absolute",
-            "top": "50%",
-            "transform": "translateY(-50%)",
-            "width": "100%",
-          }
-        }
-      >
-        <div
-          className="chakra-slider__filled-track css-0"
-          style={
-            Object {
-              "left": "0%",
-              "position": "absolute",
-              "top": "50%",
-              "transform": "translateY(-50%)",
-              "width": "50%",
-            }
-          }
-        />
-      </div>
-      <div
-        aria-labelledby="props-label"
-        aria-orientation="horizontal"
-        aria-valuemax={100}
-        aria-valuemin={0}
-        aria-valuenow={50}
-        className="chakra-slider__thumb css-0"
-        id="slider-thumb-props"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        role="slider"
-        style={
-          Object {
-            "MozUserSelect": "none",
-            "WebkitUserSelect": "none",
-            "left": "calc(50% - 0px)",
-            "msUserSelect": "none",
-            "position": "absolute",
-            "touchAction": "none",
-            "userSelect": "none",
-          }
-        }
-        tabIndex={0}
-      />
-      <input
-        type="hidden"
-        value={50}
-      />
-    </div>
-    <div
-      className="css-0"
-    >
-      100
-    </div>
-    <div
-      className="css-1f1uedm"
-      id="props-textInput-end-wrapper"
-    >
-      <input
-        aria-label="Label"
-        className="chakra-input css-0"
-        disabled={false}
-        id="props-textInput-end"
-        max={100}
-        min={0}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        required={false}
-        step={1}
-        type="number"
-        value="50"
-      />
-    </div>
-  </div>
-  <div
-    aria-atomic={true}
-    aria-live="off"
-    className="css-1xdhyk6"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "Component helper text.",
-      }
-    }
-    data-isinvalid={false}
-    id="props-helperText"
-  />
-</div>
-`;