<div class="container">
  <div class="output">
    <output>25</output><span>miles</span>
  </div>
  <div class="range-container">
    <form>
      <input type="range" min="10" max="50" step="5" value="25">
    </form>
  </div>
</div>

/* Pulling in rangeslider.css from http://seodesigns.com/projects/codepen/071016/rangeslider.css */

.container {
  width: 320px;
  margin: 0 auto;
}

.output {
  display: block;
  font-size: 16px;
  line-height: 1;
  font-weight: bold;
  width: 35px;
  text-align: center;
  height: 30px;
  float: left;
  color: #328957;
  margin-right: 10px;
}

.output span {
  font-size: 12px;
  font-weight: normal;
  display: block;
}

.rangeslider {
  display: block;
  width: 100%;
}

.range-container {
  display: block;
  width: 270px;
  padding-top: 13px;
  height: 30px;
  float: left;
}

//Pulling in jQuery from https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"

//Pulling in rangeslider.js from http://seodesigns.com/projects/codepen/071016/rangeslider.min.js

//Range slider setup
$('input[type=range]').rangeslider({
  polyfill: false,
  rangeClass: 'rangeslider',
  disabledClass: 'rangeslider--disabled',
  horizontalClass: 'rangeslider--horizontal',
  verticalClass: 'rangeslider--vertical',
  fillClass: 'rangeslider__fill',
  handleClass: 'rangeslider__handle'
});

//Functionality for a value feedback
var output = $('output')[0];

$(document).on('input', 'input[type="range"]', function(e) {
  output.innerHTML = e.currentTarget.value;
});