Needs native label support

[tomayac]

Ideally something like…

<input-knob id="KnobbyMcKnobface"></input-knob>
<input-knob-label for="KnobbyMcKnobface">
  <input-knob-mark value="1">1%</input-knob-mark>
  <input-knob-mark value="2">2%</input-knob-mark>
  <input-knob-mark value="3">3%</input-knob-mark>
  <!-- -->
</input-knob-label>

Each <input-knob-mark> should set the <input-knob> to the corresponding value attribute's value.

Currently, building this by hand is tedious, but maybe an approach like I took here might help a bit automate the annoying parts.

<svg viewBox="0 0 100 100">
    <path fill="transparent" id="circle" d="M17,50a33,33 0 1,0 66,0a33,33 0 1,0 -66,0"/>
    <text letter-spacing="26px">
      <textPath xlink:href="#circle">12345</textPath>
    </text>
</svg> 

Using this letter-spacing hack obviously breaks the moment your mark needs to be something more than one character. It's also non-semantic. And requires math to calculate the actual letter-spacing value. Just fix it and provide something better ;-)

Edit: the semantic grouping works by using <tspan>s, but they don't do what I want them yet.

[rowan-m]

This is definitely on the list! My intent here is to use the same approach as input type="range"> and allow the use of a <datalist> to specify tick marks.

As per: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range

<input type="range" list="tickmarks">

<datalist id="tickmarks">
  <option value="0" label="0%"></option>
  <option value="10"></option>
  <option value="20"></option>
  <option value="30"></option>
  <option value="40"></option>
  <option value="50" label="50%"></option>
  <option value="60"></option>
  <option value="70"></option>
  <option value="80"></option>
  <option value="90"></option>
  <option value="100" label="100%"></option>
</datalist>

[tomayac]

Fully agree, <datalist> is the way to go, nothing new is required 🎉. Now all we need is a way to make the <option>s to flow nicely around the <input-knob>.