10px);
      top: -50%;
      z-index: 1;
    }

    .styled-label {
      display: block;
    }
  </style>
</head>
<body>
  <div>
    <!-- Semantic Slider -->
    <label
      for="test-a11y-semantic-slider"
      class="styled-label"
    >
      Semantic Points
    </label>
    <input
      type="range"
      min="0"
      max="10"
      value="5"
      id="test-a11y-semantic-slider"
    />

    <!-- Styled Slider -->
    <div>
      <label
        id="test-a11y-styled-slider-label"
        class="styled-