How to make a option slider in HTML5 with 4 states?
<p>I am working on a mini personal HTML5 website for learning purpose and been stuck at coding a slider that allows 4 options (ranging between good and bad) to be chosen by sliding the button across the bar.</p>

<p>The result should be able to trigger some code for a change in display elsewhere.</p>

<p>I am sure there are many tutorials for this but I can't seem to figure out the correct way to name of the slider. When I search option slider on google I end up with image sliders and or google images of what I want. </p>

<p>I am sure it can't be that tricky but I just can't seem to figure out how to do it as it's my first attempt.</p>

<pre><code>&lt;label for="weight"&gt;Option&lt;/label&gt;
&lt;input id="weight" min="0" value="0" max="3" step="1"&gt;
</code></pre>

<p>Some of the searches I have done: for example: <a href="https://www.google.co.uk/search?q=range+slider&amp;source=lnms&amp;tbm=isch&amp;sa=X&amp;ved=0ahUKEwjEorDrkbbQAhWoJ8AKHbGiDEsQ_AUICSgC&amp;biw=1366&amp;bih=700#tbm=isch&amp;q=option+slider" rel="nofollow noreferrer">https://www.google.co.uk/search?q=range+slider&amp;source=lnms&amp;tbm=isch&amp;sa=X&amp;ved=0ahUKEwjEorDrkbbQAhWoJ8AKHbGiDEsQ_AUICSgC&amp;biw=1366&amp;bih=700#tbm=isch&amp;q=option+slider</a></p>