• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Dial

Component status
Contribution
Current version@spectrum-css/dial@3.1.2
ReleasedAugust 29, 2024
S2-foundations@spectrum-css/dial@4.0.0-s2-foundations.12
ReleasedAugust 2, 2024
View repository
GitHub
View package
npm

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">
      <input type="range" class="spectrum-Dial-input" min="0" max="100" value="0" disabled>
    </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">
      <input type="range" class="spectrum-Dial-input" min="0" max="100" value="0" disabled>
    </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">
      <input type="range" class="spectrum-Dial-input" id="labeledDial" min="0" max="100" value="0" disabled>
    </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">
      <input type="range" class="spectrum-Dial-input" id="labeledDial" min="0" max="100" value="0" disabled>
    </div>
  </div>
</div>