用于跟踪栏开始和结束的HTML CSS上标签

Question

I need to display upper labels for start and end sides of trackbar (input type="range"). Should be done as in the picture:

Labels are highlighted in red. Here is a fragment of my HTML code:

<div class="trackbar">
    <span class="bound_label">20 000</span>
    <input type="range" />
    <span class="bound_label">3 000 000</span>
</div>

What styles should be for the class 'bound_label' to display it correctly (as in the picture)? Thanks!

UPDATE Thanks all for answers. But there is one important point! The center of upper label must be aligned by bottom of trackbar (as in the picture, align by green line)! How I can solve it??

Answer 1

A simple way is to move your labels at top:

.trackbar .bound_label {
  float: right;
}
.trackbar .bound_label:first-of-type {
  float: left;
}
.trackbar > input {
  display: block;
  width: 100%;
}

plunker: Plunker example

Answer 2

HTML:

<div class="trackbar 1">
    <span class="bound_label left">20 000</span>
    <span class="bound_label right">3 000 000</span>
    <input type="range">
</div>
<div class="trackbar 2">
    <span class="bound_label left">1</span>
    <span class="bound_label right">60</span>
    <input type="range">
</div>

CSS

input[type="range"] {
    width:100%;
}
input[type="range"]::-moz-range-progress {
    background-color: red; 
}

input[type="range"]::-moz-range-track {  
    background-color: grey;
}

.trackbar .bound_label.left {
    float:left;
}
.trackbar .bound_label.right {
    float:right;
}

JSFiddle demo