Повесить на событие (движение ползунка) получение его значения.
Полагаю будет Минимальное значение 0. Максимальное 100.
Ну а дальше дело техники предположим у нас есть 5 картинок, 100/5 = шаг 20 (т.е. каждые 20 ед. ползунка мы должны менять картинку).
0 - 20 = 1 картинка
20 - 40 = 2 картинка
40 - 60 = 3 картинка ну и тд
Ну и как выбрать текущую картинку. Формула будет примерно такой:
100 / кол-во картинок = X (наш шаг) //20
текущее положение ползунка / X = номер картинки (только тут получится дробное число, приведи к целому (int)число).Примерно так
HTML
<body>
<div>
<input type="range" id="volume" name="volume" min="0" max="100" value="0">
<label for="volume" id="imageInfo"></label>
</div>
</body>
//с ивентами тут можно поиграться. что бы в процессе уже срабатывал ивент, а не только после отжатия кнопки
$('#volume').change(function() {
let images = ['one.jpg', 'two.png', '3.png', 'четвертое изображение', '5 картинка'];
let position = $(this).val();
let curImage = Math.trunc(position / (100 / images.length));
$('#imageInfo').text('Position: ' + position + ' ;Image: ' + images[curImage]);
});
PS решение выше куда элегантнее)
Простой
