HTML Range Slider show output elements on document load with jQuery

Question

Hi I have a slider which has a value of years form the last decade. The current way my slider works is that the first output in shown by default on the document load. However I actually want to visually show visitors that this is a slider with values of years.

Therefore I want all available outputs to be shown on document load. Not really sure how to go about this as I used a tutorial in the first place to help create the slider.

What I did try was to change the following from:

.next("output")
 then do the logic....

to:

 .each("output")
 then do the logic....

however this failed to work.

If somebody could help me out that would be great!!

My code is below or view a jsFiddle:

js/js.js

$(function() {
   var el, newPoint, newPlace, offset;
   $("input[type='range']").change(function() {
     el = $(this);
     width = el.width();
     newPoint = (el.val() - el.attr("min")) / (el.attr("max") - el.attr("min"));
     offset = -1.3;
     if (newPoint < 0) { newPlace = 0;  }
     else if (newPoint > 1) { newPlace = width; }
     else { newPlace = width * newPoint + offset; offset -= newPoint;}
     el
       .next("output")
       .css({
         left: newPlace,
         marginLeft: offset + "%"
       })
       .text(el.val());
   })
   .trigger('change');
 });

index.html

<input id="year_range" type="range" min="2003" max="2013" value="2003" step="1" />
<output for="year"></output>

Answer 1

There is no magic way to do it. You have to add a div before your slider to contain the labels. Inside the div you'll have to place some inline-blocks to contain each year with a width of 9% for the number of points you have in your slider.

The output is in absolute position so it will pass over your labels.