{{#> web/layout/default title="Slider" parentPageName="Components" isUnstable=true }}

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Default</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <div class="UNSTABLE_Slider">
        <label for="slider-default" class="UNSTABLE_Slider__label">Slider</label>
        <input
          class="UNSTABLE_Slider__input"
          id="slider-default"
          style="--slider-position: 30%"
          type="range"
          value="30"
          oninput="this.style.setProperty('--slider-position', `${Math.round((100 * this.value) / 100)}%`);"
        />
      </div>

      <div class="UNSTABLE_Slider">
        <label for="slider-steps" class="UNSTABLE_Slider__label">Custom steps</label>
        <input
          class="UNSTABLE_Slider__input"
          id="slider-steps"
          style="--slider-position: calc(100% * (9 - 3) / (12 - 3))"
          type="range"
          min="3"
          max="12"
          value="9"
          oninput="this.style.setProperty('--slider-position', `${Math.round(100 * (this.value - 3) / (12 - 3))}%`);"
        />
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Hidden Label</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <div class="UNSTABLE_Slider">
        <label for="slider-hidden-label" class="UNSTABLE_Slider__label UNSTABLE_Slider__label--hidden">Slider</label>
        <input
          class="UNSTABLE_Slider__input"
          id="slider-hidden-label"
          style="--slider-position: 30%"
          type="range"
          value="30"
          oninput="this.style.setProperty('--slider-position', `${Math.round((100 * this.value) / 100)}%`);"
        />
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Helper Text</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <div class="UNSTABLE_Slider">
        <label for="slider-helper-text" class="UNSTABLE_Slider__label">Slider</label>
        <input
          class="UNSTABLE_Slider__input"
          id="slider-helper-text"
          aria-describedby="slider-helper-text-helper-text"
          style="--slider-position: 30%"
          type="range"
          value="30"
          oninput="this.style.setProperty('--slider-position', `${Math.round((100 * this.value) / 100)}%`);"
        />
        <div id="slider-helper-text-helper-text" class="UNSTABLE_Slider__helperText">
          Helper text
        </div>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Disabled</h2>

    <div class="docs-Stack docs-Stack--start">

      <div class="UNSTABLE_Slider UNSTABLE_Slider--disabled">
        <label for="slider-disabled" class="UNSTABLE_Slider__label">Slider</label>
        <input
          class="UNSTABLE_Slider__input"
          id="slider-disabled"
          style="--slider-position: 30%"
          type="range"
          value="30"
          oninput="this.style.setProperty('--slider-position', `${Math.round((100 * this.value) / 100)}%`);"
          disabled
        />
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Validation State with Validation Text</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <div class="UNSTABLE_Slider UNSTABLE_Slider--success">
        <label for="slider-success" class="UNSTABLE_Slider__label">Slider</label>
        <input
          class="UNSTABLE_Slider__input"
          id="slider-success"
          style="--slider-position: 30%"
          type="range"
          value="30"
          oninput="this.style.setProperty('--slider-position', `${Math.round((100 * this.value) / 100)}%`);"
        />
      </div>

      <div class="UNSTABLE_Slider UNSTABLE_Slider--warning">
        <label for="slider-warning" class="UNSTABLE_Slider__label">Slider</label>
        <input
          class="UNSTABLE_Slider__input"
          id="slider-warning"
          aria-describedby="slider-warning-validation-text"
          style="--slider-position: 30%"
          type="range"
          value="30"
          oninput="this.style.setProperty('--slider-position', `${Math.round((100 * this.value) / 100)}%`);"
        />
        <div id="slider-warning-validation-text" class="UNSTABLE_Slider__validationText">
          Validation text
        </div>
      </div>

      <div class="UNSTABLE_Slider UNSTABLE_Slider--danger">
        <label for="slider-danger" class="UNSTABLE_Slider__label">Slider</label>
        <input
          class="UNSTABLE_Slider__input"
          id="slider-danger"
          aria-describedby="slider-danger-validation-text"
          style="--slider-position: 30%"
          type="range"
          value="30"
          oninput="this.style.setProperty('--slider-position', `${Math.round((100 * this.value) / 100)}%`);"
        />
        <div id="slider-danger-validation-text" class="UNSTABLE_Slider__validationText">
          <ul>
            <li>First validation text</li>
            <li>Second validation text</li>
          </ul>
        </div>
      </div>

      <div class="UNSTABLE_Slider UNSTABLE_Slider--danger">
        <label for="slider-danger-with-helper-text" class="UNSTABLE_Slider__label UNSTABLE_Slider__label--required">Slider</label>
        <input
          class="UNSTABLE_Slider__input"
          id="slider-danger-with-helper-text"
          aria-describedby="slider-danger-with-helper-text-helper-text slider-danger-with-helper-text-validation-text"
          style="--slider-position: 30%"
          type="range"
          value="30"
          oninput="this.style.setProperty('--slider-position', `${Math.round((100 * this.value) / 100)}%`);"
        />
        <div id="slider-danger-with-helper-text-helper-text" class="UNSTABLE_Slider__helperText">
          Helper text
        </div>
        <div id="slider-danger-with-helper-text-validation-text" class="UNSTABLE_Slider__validationText">
          Validation text
        </div>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Fluid</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <div class="UNSTABLE_Slider UNSTABLE_Slider--fluid">
        <label for="slider-fluid" class="UNSTABLE_Slider__label">Slider</label>
        <input
          class="UNSTABLE_Slider__input"
          id="slider-fluid"
          style="--slider-position: 30%"
          type="range"
          value="30"
          oninput="this.style.setProperty('--slider-position', `${Math.round((100 * this.value) / 100)}%`);"
        />
      </div>

    </div>

  </div>

</section>

{{/web/layout/default }}