Best practise to realize up down arrows in select field
<p>What is the best way to setup a percentage arrow up/down slider/selector in a select element in a web page like this:</p>

<p><a href="https://i.stack.imgur.com/ygu55.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ygu55.png" alt="up down arrow slider for percentage"></a></p>

<ol>
<li>A select list with a dedicated background. If yes, how can it be detected that the user clicked on the up or down arrows?</li>
<li>Build for each percentage up/down item a table of three rows/one column with: a) row 1 = up arrow, b) row 2 = select option list, c) row 3 = down arrow</li>
<li>some other solution?</li>
</ol>

<p>Remark: the percentages can be increased/decreased in steps of 5 %</p>