WILT: Entities in input labels

A quick one - how to put entities in input labels/ attributes

Working on a mood tracker for the year, wanted a scale of mood between 0-10. For cute, I wanted to have Smileys attached to each rung. Entities by & in the label just parsed out as raw ampersands. I had to use the hexadecimal unicode representation of &#x for it to work. So

 1<input type="range" list="tickmarks" id="score" name="score2" step="1" min="0" max="10">
 2<datalist id="tickmarks">
 3    <option value="0" label="&#x2620;"></option>
 4    <option value="1" label="&#x1f92c;"></option>
 5    <option value="2" label="&#x1f630;"></option>
 6    <option value="3" label="&#x1f61f;"></option>
 7    <option value="4" label="&#x1f62c;"></option>
 8    <option value="5" label="&#x1f928;"></option>
 9    <option value="6" label="&#x1f611;"></option>
10    <option value="7" label="&#x1f600;"></option>
11    <option value="8" label="&#x1f601;"></option>
12    <option value="9" label="&#x1F923;"></option>
13    <option value="10" label="&#x1f970;"></option>
14</datalist>
15<style>
16    label {
17        display: block;
18    }
19    option {
20        width:3ex;
21        text-align:center;
22    }
23    input[type="range"] {
24        width: 100%;
25        margin: 0;
26    }
27    datalist {
28        display: flex;
29        justify-content: space-between;
30        width: 100%;
31    }
32</style>

comes out as

(Based on code found on Mozilla)

Update

Turns out that range sliders are still non-standardised for styling. Trying this out on my iPad had tick marks, and no smiley faces. I've conceded and resorted to using an inline fieldset of radioboxes. Means I get to add styling to the :checked to make them stand out and it's... not as nice, but still nice.