- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
- Default
- Express
Dial
Component status | Contribution |
---|---|
Current version | @spectrum-css/dial@3.1.3 |
Released | September 13, 2024 |
S2-foundations | @spectrum-css/dial@4.0.0-s2-foundations.15 |
Released | October 4, 2024 |
Usage notes
A dial for turning it up to 11.
Variants
StandardContribution
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 labelContribution
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>