Question

I am currently stuck at the part whenever I drag a HTML5 slider, it will show a thumbnail/small picture on the top or bottom of the slider. My slider is something like this…

 <input name="sliderStatus"  id="sliderStatus" type="range" min="0" max="100" value="0" step="1"/>

But how to do the thumbnail thingy? Any example? Thanks (:

Answer 1

As I understand you, you want to change thumbnail size according to the input range value.

You need to add onchange event listener to your range input and attach it to some callback, updateThumbnail for example:

<input name="sliderStatus" onchange="updateThumbnail(this)"  id="sliderStatus" type="range" min="0" max="100" value="0" step="1"/>

Then in your callback according to your value you can change thumbnail width:

function updateThumbnail(rangeInput) {
    var myImage = document.getElementById('someImage');
    myImage.width = rangeInput.value;
    myImage.height = rangeInput.value;
}

UPDATE:

According to your comment you need to change step attribute in your range input:
step=”10″

And for example modify your function to show your images:

function updateThumbnail(rangeInput) {
    var previousImage = document.getElementById('someImage' + (rangeInput.value - 10));
    if(previousImage) {
        previousImage.style.display = 'none';
    }
    var nextImage = document.getElementById('someImage' + rangeInput.value);
    nextImage.style.display = 'block';
}

Html markup for images should be:

<img src="pathToThumbnail" id="someImage0" style="display: block;">
<img src="pathToThumbnail" id="someImage10" style="display: none;">
<img src="pathToThumbnail" id="someImage20" style="display: none;">
...
<img src="pathToThumbnail" id="someImage100" style="display: none;">

See demo on jsFiddle