Денис Инешин

$(".myClass").each(function (i) {
     $(this).prop("id", "myClass" + i);
});

Это делается не тенью.
1. Внутрь дива кладется еще один див с position: absolute и прижимается к низу блока
2. Внутрь дива кладем либо картинку либо градиентную заливку от белого в прозрачный.
3. Profit!

Пример с помощью :after
https://jsfiddle.net/ab5oo40a/2/

Сойдет, посмотрите еще это: jQuery plugin patterns

habrahabr.ru/post/267715

1. Простите но тут немного BEM головного мозга. Используйте препроцессоры, и не будет никакой проблемы через запятую расставить классы и состояния, не будет проблемы пересобрать в случае изменения логики.
2. Ваш плагин слишком заточен под существующие элементы. Например вас ждет облом, если вы вставите пару кнопочек позже (например в сгенерированном попапе).

1. Кубики как раз не инлайн блоки. В этой ситуации при уничтожении одного из них, сдвинется вся конструкция. Делайте на position: absolute.
В крайнем случае просто ставьте opacity: 0 или visibility: hidden и условие для шарика что блоки с таким то классом игнорировать.
2. Position: absolute решает
3. Да, чем меньше вы вычисляете на лету, тем быстрее работает. Один раз меняем переменную при смене нажатии на кнопки вправо/влево
4. Тут на ваше усмотрение. С вектором будет проще (имхо).

https://jsfiddle.net/oysxff5g/
Вот такой код запретит прямой переход по ссылке, но при этом оставит доступным открытие в новой вкладке или новом окне по shift+click, cmd+click и т.п.

Вам поможет делегирование событий.

$(document).on('click', '.num', function () {
    console.log(123);
});

Суть в том, что вы пытаетесь повесить слушатель события на еще не существующие элементы. Конечно же ничего не сработает.

getComputedStyle()

Возьмите другой ползунок, который работает без jQuery UI. Например: Ion.RangeSlider

https://learn.javascript.ru/
https://github.com/getify/You-Dont-Know-JS