https://jsfiddle.net/2cc83shx/2/

$( document ).ready( function() {
    $( '#rangeInput' ).on( 'change', function() {
        $( '#a' ).css({
            'transform': 'translateX(' + $(this).val() + 'px)'
        })
    })
})

I can help a bit. you can positioning it a bit better later from my fiddle. (here, I'm using jquery to select the element. you can use pure js to do this too)

*UPDATE

If you want it to follow whenever you drag the range, follow the code below

https://jsfiddle.net/2cc83shx/3/

Via: http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

But what if you want all the numbers to be valid, integers and decimals alike? In this case, set step to “any”

<input type="number" step="any" />

Works for me in Chrome, not tested in other browsers.

The following works for me in chrome, I'm thinking that it's the shortcut step=".25" that won't work

 <input id="something" type="range" min="0" max="0" step ="0.25" value="5" />

I used to use numpy.arange but had some complications controlling the number of elements it returns, due to floating point errors. So now I use linspace, e.g.:

>>> import numpy
>>> numpy.linspace(0, 10, num=4)
array([  0.        ,   3.33333333,   6.66666667,  10.        ])

You can use the onkeyup attribute

<input type="number" onkeyup="if(this.value<=0){this.value = 1}">

Or you could simply set the min value to something like this 0.0000001

<input type="number" min=0.0000001>

An example with custom output

It's updating while you drag the input.

var el, newPoint, newPlace, offset;
 
$('input[type=range]').on('input', function () {
    $(this).trigger('change');
});
// Select all range inputs, watch for change
$("input[type='range']").change(function() {

 // Cache this for efficiency
 el = $(this);
 
 // Measure width of range input
 width = el.width();
 
 // Figure out placement percentage between left and right of input
 newPoint = (el.val() - el.attr("min")) / (el.attr("max") - el.attr("min"));
  
  offset = -1;

 // Prevent bubble from going beyond left or right (unsupported browsers)
 if (newPoint < 0) { newPlace = 0; }
 else if (newPoint > 1) { newPlace = width; }
 else { newPlace = width * newPoint + offset; offset -= newPoint; }
 
 // Move bubble
 el
   .next("output")
   .css({
     left: newPlace,
     marginLeft: offset + "%"
   })
     .text(el.val());
 })
 // Fake a change to position bubble at page load
 .trigger('change');

output { 
  position: absolute;
  background-image: linear-gradient(#444444, #999999);
  width: 40px; 
  height: 30px; 
  text-align: center; 
  color: white; 
  border-radius: 10px; 
  display: inline-block; 
  font: bold 15px/30px Georgia;
  bottom: 175%;
  left: 0;
  margin-left: -1%;
}
output:after { 
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10px solid #999999;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  margin-top: -1px;
}
form { 
  position: relative; 
  margin: 50px;
}
body {
  padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form>
<input type="range" name="foo" min="0" max="100">
<output for="foo" onforminput="value = foo.valueAsNumber;"></output>
</form>

<form>
<input type="range" name="foo" min="0" max="100" style="width: 300px;">
<output for="foo" onforminput="value = foo.valueAsNumber;"></output>
</form>

<form>
<input type="range" name="foo" min="0" max="100">
<output for="foo" onforminput="value = foo.valueAsNumber;"></output>
</form>

reference https://css-tricks.com/value-bubbles-for-range-inputs/