• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL

Dial

Component status
Contribution
Last releasedOctober 20, 2020
Current version@spectrum-css/dial@1.0.0-beta.3

Usage notes


A dial for turning it up to 11.

Variants


Standard
Contribution



Show markup
<div class="spectrum-Dial">
  <div class="spectrum-Dial-controls">
    <div class="spectrum-Dial-handle" tabindex="0">
      <input type="range" class="spectrum-Dial-input" min="0" max="100" value="0">
    </div>
  </div>
</div>
<div class="spectrum-Dial is-disabled">
  <div class="spectrum-Dial-controls">
    <div class="spectrum-Dial-handle" tabindex="0">
      <input type="range" class="spectrum-Dial-input" min="0" max="100" value="0">
    </div>
  </div>
</div>
<br><br>
<div class="spectrum-Dial spectrum-Dial--small">
  <div class="spectrum-Dial-controls">
    <div class="spectrum-Dial-handle" tabindex="0">
      <input type="range" class="spectrum-Dial-input" min="0" max="100" value="0">
    </div>
  </div>
</div>
<div class="spectrum-Dial spectrum-Dial--small is-disabled">
  <div class="spectrum-Dial-controls">
    <div class="spectrum-Dial-handle" tabindex="0">
      <input type="range" class="spectrum-Dial-input" min="0" max="100" value="0">
    </div>
  </div>
</div>

With label
Contribution



54
54
Show markup
<div class="spectrum-Dial">
  <div class="spectrum-Dial-labelContainer">
    <label id="dialLabel" class="spectrum-Dial-label" for="labeledDial">Label</label>
    <!--<div class="spectrum-Dial-value" role="textbox" aria-readonly="true" aria-labelledby="dialLabel">54</div>-->
  </div>
  <div class="spectrum-Dial-controls">
    <div class="spectrum-Dial-handle" tabindex="0">
      <input type="range" class="spectrum-Dial-input" id="labeledDial" min="0" max="100" value="0">
    </div>
  </div>
</div>
<div class="spectrum-Dial is-disabled">
  <div class="spectrum-Dial-labelContainer">
    <label id="dialLabel" class="spectrum-Dial-label" for="labeledDial">Label</label>
    <!--<div class="spectrum-Dial-value" role="textbox" aria-readonly="true" aria-labelledby="dialLabel">54</div>-->
  </div>
  <div class="spectrum-Dial-controls">
    <div class="spectrum-Dial-handle" tabindex="0">
      <input type="range" class="spectrum-Dial-input" id="labeledDial" min="0" max="100" value="0">
    </div>
  </div>
</div>
<br><br>
<div class="spectrum-Dial">
  <div class="spectrum-Dial-labelContainer">
    <label id="dialLabel" class="spectrum-Dial-label" for="labeledDial">Label</label>
    <div class="spectrum-Dial-value" role="textbox" aria-readonly="true" aria-labelledby="dialLabel">54</div>
  </div>
  <div class="spectrum-Dial-controls">
    <div class="spectrum-Dial-handle" tabindex="0">
      <input type="range" class="spectrum-Dial-input" id="labeledDial" min="0" max="100" value="0">
    </div>
  </div>
</div>
<div class="spectrum-Dial is-disabled">
  <div class="spectrum-Dial-labelContainer">
    <label id="dialLabel" class="spectrum-Dial-label" for="labeledDial">Label</label>
    <div class="spectrum-Dial-value" role="textbox" aria-readonly="true" aria-labelledby="dialLabel">54</div>
  </div>
  <div class="spectrum-Dial-controls">
    <div class="spectrum-Dial-handle" tabindex="0">
      <input type="range" class="spectrum-Dial-input" id="labeledDial" min="0" max="100" value="0">
    </div>
  </div>
</div>