Ползунок с изменением контента в блоке сайта

При пошаговом перемещении ползунка вправо или влево, происходит изменение содержимого в блоке сайта. Шкала ползунка разделена на определенное количество позиций (шагов, делений). Каждой позиции ползунка соответствует свой html блок DIV, в которых содержится контент для показа. Содержимое DIV блоков скрыто, до тех пор, пока ползунок не окажется на позиции, соответствующей этому блоку.

Пример блоков с контентом для каждой позиции ползунка: <div id="blocks-container"> <div>Content 1</div> <div>Content 2</div> <div>Content 3</div> <div>Content 4</div> </div>
Стоимость на сайте источнике: бесплатно, как есть.
Расположение на сайте источнике: текст на странице.
Исходный код: открытый.
Использует: javascript, jQuery, jQery UI, html, css.
Установка: вставить на html страницу.
Проверен в браузере: FireFox.
Сложность: знание основ веб-разработки приветствуется.