Adding label to the end of HTML Range slider

Question

I'm currently implementing a range slider and have a label at the start of the slider which is positioned just above the slider. This label represents the low end of the scale. Now i need to add a label in the same position at the end of the slider to represent the highest end of the scale. However, i can only get the label to appear at the start of the scale but underneath. I'm using Bootstrap for CSS.

<div class="container">
      <label for="agitated">Agitated</label>
      <input type="range" min="0" max="10" value="5" id="fader">
      </br>

      <label for="happy">Happy</label>
      <input type="range" min="0" max="10" value="5" id="fader">
      </br>

      <label for="tired">Tired</label>
      <input type="range" min="0" max="10" value="5" id="fader">
      </br>

      <label for="scared">Scared</label>
      <input type="range" min="0" max="10" value="5" id="fader">
    </div>

Answer 1

Just a heads up for anyone wondering why the answer given by @Denisx isn't working with Bootstrap 4.0 . Use float-left and float-right rather than pull-left and pull-right.

Answer 2

<label for="happy" class="pull-left">Happy</label>
<label for="" class="pull-right">Sad</label>
<input type="range" min="0" max="10" value="5" id="fader">
</br>

Something like this? If thats the points, just use the bootstrap class pull-left and pull-right for each label.

Here is example:

http://jsbin.com/ziluwuv/1/edit?output