javascript - HTML5 サムネイル スライダー

Question

HTML5 スライダーをドラッグするたびに、現在、その部分で立ち往生しています。スライダーの上部または下部にサムネイル/小さな画像が表示されます。私のスライダーはこのようなものです...

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

しかし、サムネイルをどうやってやるのですか？例はありますか？ありがとう （：

Answer 1

rangeご承知のとおり、入力値に応じてサムネイルのサイズを変更したいと思います。

範囲入力にイベントリスナーを追加onchangeし、それをコールバックにアタッチする必要があります。updateThumbnail次に例を示します。

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

次に、値に応じてコールバックでサムネイルの幅を変更できます。

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

アップデート：

コメントによると、範囲入力の属性を変更する必要がありstepます：step = "10"

たとえば、画像を表示するように関数を変更します。

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マークアップは次のようになります。

<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;">

jsFiddleのデモを見る