Rangeslider.js

<link href="rangeslider.css" rel="stylesheet" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="rangeslider.min.js"></script>

.rangeslider__fill {
  background: #00ffb2;
}

output {
  display: block;
  text-align: center;
  font-size: 50px;
  margin-top: 25px;
}

<input 
	type="range"
	min="10"     
	max="1000"
	step="10"
	value="300"
	data-orientation="horizontal" 
>

<output></output>

updateVal = function(value){
	$('output').val(value);
};

var $el = $('input[type=range]');

$el.rangeslider({

    // Feature detection the default is `true`.
    // Set this to `false` if you want to use
    // the polyfill also in Browsers which support
    // the native <input type="range"> element.
    polyfill: false,

    // Default CSS classes
    rangeClass: 'rangeslider',
    disabledClass: 'rangeslider--disabled',
    horizontalClass: 'rangeslider--horizontal',
    verticalClass: 'rangeslider--vertical',
    fillClass: 'rangeslider__fill',
    handleClass: 'rangeslider__handle',

    // Callback function
    onInit: function() {
    	updateVal($el.val());
    },

    // Callback function
    onSlide: function(position, value) {
    	updateVal(value);
    },

    // Callback function
    onSlideEnd: function(position, value) {}
});