Javascript-калькулятор з використанням jquery-слайдера (повзунка)

Ще одна замітка про калькулятори, тепер про використанням давно вже стали популярними інтерактивних елементів управління типу слайдер / slider / повзунок.

Суть зручності і популярності полягає в зменшенні кількості забитих цифровими значеннями полів, наприклад, кількісних характеристик або діапазонів цін.

В даному випадку розглянемо далекий від реальності приклад, але достатній щоб зрозуміти прості основи використання слайдерів в калькуляторі.

Наш калькулятор буде умовно вважати вартість оренди кімнат відпочинку з коефіцієнтом їх типу.
Відповідно два слайдера відповідають за вибір кількості кімнат, що випадає список за вибір мультиплікатора, тобто їх типу.

У слайдеров є максимальне і мінімальне значення, а також величина кроку.
В даному прикладі min, max - 1-5, 6-10, і крок за одиницю.

Виклик своєї функції при русі слайдера

Деякою особливістю цього прикладу є виклик нашій кастомной вважає функції calc (); в подію slide. Таким чином при кожному русі слайдера все результати розрахунків будуть перераховуватися і оновлюватися в зведеній таблиці.

Як поміняти зовнішній вигляд слайдеров

FireBug-му легко помітити велику кількість css-стилів навішених на елементи слайдера, це означає що правити їх на свої ми можемо простим перевизначенням з ключовим словом! Important;
Так в цьому прикладі зменшений загальний розмір елементів слайдера за рахунок перевизначеного стилю:
.ui-widget

Примітка: щоб такий трюк спрацював, ваші css-стилі повинні довантажуватися пізніше рідних від jQuery.

Сумісність з браузерами

Тестувалося у всіх популярних. Єдиний викликав помилку - Internet Explorer:
Повідомлення: Об'єкт не підтримує це властивість чи метод
Рядок: 46
Символ: 2
Код: 0 Виявилося, що причина в неоголошеної змінної summ.

Код скрипта калькулятора

Спасибі, класно! Довго шукав щось на подобі. Переробив під свої потреби.

Але у мене є одна потреба, треба включити знижку, яка залежить від кількості днів. Наприклад стандартний номер коштує 1000, якщо береш 3 дні, то знижка за добу 200, якщо 7 днів, то знижка за добу 300 і т.д.

Ось як це зробити не можу збагнути

Вітаю! Питання собсно дурний, але як поміняти місцями елементи в калькуляторі, наприклад щоб select був внизу, а повзунок вгорі і т.д.?

Знадобилось? Подякуйте рублем! ^ _ ^

нові записи

Приєднуюся до питання. Як зробити дві галереї на одній сторінці?

Спасибі, велике! Дуже класний скрипт. Якраз для нашого сайта.Давно такої.

Дякую за наданий код. Скопіював код як є, вставив посилання картинок.

Сенс насправді є. Наприклад, централізоване храніліше налаштувань.

Спасибі, все працює відмінно. Використовував на своєму сайті

Не виключено, звичайно роблять бекап перед оновленням.