Ползунок с калькулятором html

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Simple price calculator using range sliders

romidgomez/Range-calculator

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Simple cost calculator using range sliders.

This calculator is being used to estimate loss in revenue due to bad Candidate Experience. You can easily change the text and formulas to adjust it to your convinience.

About

Simple price calculator using range sliders

Источник

JavaScript — Slider Calculator

Пример создания калькулятора на основе HTML-элемента input type=”range”. Это слайдер, у которого можно плавно изменять значения при помощи ползунка. Текущее значение хранится в атрибуте value данного элемента.

На этом принципе и основана работа калькулятора, который рассмотрим ниже.

Что будет считать калькулятор? В качестве примера — сумму чаевых в кафе. Есть основная сумма ($), задается процент (%) чаевых для основной суммы.

Нужно посчитать результирующую сумму ($).

HTML разметка

Разметка калькулятора основана на элементах form, input type=”text”, input type=”range”. Она простая и представлена ниже:

 class="wrapper">  class="wrapper__title">javascript slider calculator  class="calculator">  class="calculator__row">  for="bill">enter the bill amount for your meal: $  type="text" id="bill" class="calculator__bill" value="5" required/>   class="calculator__row">  for="tip">tip amount:  class="tip-amount">  type="range" min="0" max="100" value="0" step="1" class="calculator__tip" id="tip" required/>   class="calculator__row">  class="calculator__info">tip to leave:  class="calculator__result">   

CSS стили

Стилизация для калькулятора также не отличается объемом и сложностью. Что-либо отмечать отдельно нет необходимости:

.wrapper  width: 800px; margin: 50px auto 0; padding: 60px 30px; border: 1px solid #000; > .wrapper__title  text-transform: capitalize; margin: 0 0 40px; > .calculator__row  display: flex; justify-content: space-between; align-items: center; margin: 0 0 30px; > .calculator__row:last-child  margin-bottom: 0; > .calculator__row label  text-transform: capitalize; font-weight: 700; > .calculator__bill  width: 50%; > .calculator__tip  width: 60%; > .calculator__info  text-transform: capitalize; margin: 0; >

JavaScript код

Функция для вычисления результирующей суммы “повешена” на элемент input type=”range” и событие change.

Другими словами, при перемещении ползунка слайдера каждый раз будет вызываться функция и производится пересчет на основе изменившегося значения атрибута value.

Принцип работы функции следующий. “Забираем” значения из элементов input type=”text” и input type=”range”. Первое значение — эту основная сумма ($); второе значение — процент (%) от основной суммы ($).

Получаем результирующую сумму путем сложения — основной суммы ($) + процент (%) от основной суммы. Результирующий вывод округляем до двух значений после запятой при помощи метода toFixed().

Помимо этого, проверяем правильность и наличие ввода в поле основной суммы ($) input type=”text”. Условие будет верным, если поле ввода окажется не пустым и содержащим только цифры:

// RANGE FUNCTION // ---------------------------------------------------------- calculatorTip.on('change', function ()  if ( calculatorBill.val() === '' || isNaN( calculatorBill.val() ) )  alert('Enter bill amount, please!') > else  amount = calculatorBill.val() * 1; > tipAmount.text( calculatorTip.val() + '%' ); percent = calculatorTip.val() * 1; result = amount + amount * ( percent / 100 ); calculatorResult.text( result.toFixed(2) + '$' ); >);

Для “украшательства” можно создать еще одну функцию, которая будет запускаться при загрузке страницы и инициализировать значения суммы ($), процентов (%) от суммы и результирующей суммы ($):

// INIT FUNCTION // ---------------------------------------------------------- $(window).on('DOMContentLoaded', function ()  tipAmount.text( calculatorTip.val() + '%' ); amount = calculatorBill.val() * 1; percent = calculatorTip.val() * 1; result = amount + amount * ( percent / 100 ); calculatorResult.text( result.toFixed(2) + '$' ); >);

Весь JavaScript-код для обработки калькулятора можно представить ниже:

$(document).ready( function ()  // VARIABLES // ---------------------------------------------------------- var amount, percent, result; var calculator = $('.calculator'); var calculatorBill = calculator.find('.calculator__bill'); var calculatorTip = calculator.find('.calculator__tip'); var calculatorResult = calculator.find('.calculator__result'); var tipAmount = calculator.find('.tip-amount'); // INIT FUNCTION // ---------------------------------------------------------- $(window).on('DOMContentLoaded', function ()  tipAmount.text( calculatorTip.val() + '%' ); amount = calculatorBill.val() * 1; percent = calculatorTip.val() * 1; result = amount + amount * ( percent / 100 ); calculatorResult.text( result.toFixed(2) + '$' ); >); // RANGE FUNCTION // ---------------------------------------------------------- calculatorTip.on('change', function ()  if ( calculatorBill.val() === '' || isNaN( calculatorBill.val() ) )  alert('Enter bill amount, please!') > else  amount = calculatorBill.val() * 1; > tipAmount.text( calculatorTip.val() + '%' ); percent = calculatorTip.val() * 1; result = amount + amount * ( percent / 100 ); calculatorResult.text( result.toFixed(2) + '$' ); >); >);

Готовый пример калькулятора-слайдера можно посмотреть здесь — JavaScript Slider Calculator

На этом все. В ближайшее время буду продолжать нести JavaScript-flood )

Источник

Ползунки на ui js. Калькулятор на ползунках в jQuery

Наверняка на многих лэндингах вы видели ползунки, передвигая рычаги которых менялись цифры в том или ином поле. Чаще всего такие ползунки делаются на ui библиотеки совместно с jQuery.

Рассмотрим способ не только создания таких ползунков, но и работу простого калькулятора на их основе.

Посмотрите скрин калькулятора. На каждый ползунок можно назначить свои параметры или даже перепрограммировать их функционал. Например в данном примере, в первом ползунке минимальным является значение 50000. Но у вас получится поставить только 51000. Если провести его к левому краю, то получится 0. В условии каждого ползунка я поставил такое ограничение. Это позволяет пользователю выключить услугу если она не нужна. Конечно, можно было бы поставить изначально значение 0, но что, если стоимость услуги начинается от 51000? Поэтому пришлось использовать такое решение.

В скачанном примере подключаются библиотеки jquery-1.9.2.js, jquery-ui-1.9.2.custom.min.js и jquery.ui.touch-punch.js . Последняя очень важная — она позволяет ползункам работать в телефонах, так как в версии из коробки такой возможности не было.

Чтобы назначить любому элементу ползунок используется такой код:

jQuery( «.fcalcp5_vedyshiy» ).slider( range: «min»,
value: 1000,
min: 50000,
max: 200000,
step: 1000,
animate:true,
slide: function( event, ui ) < >,
stop: function( event, ui ) < >
>);

Здесь min и max задают пределы, в которых будет работать ползунок, а step будет являться шагом передвижения рычага.

Если вы посмотрите код, то увидите, что ui.value обрамляется функцией addSpaces() . Она необходима для расстановки пробелов в цифрах. Например 12000 превратится в 12 000, а 1523450 в 1 523 450. Согласитесь, с пробелами цифры воспринимаются лучше.

После того, как все ползунки заданы, их все значения прописываются в тегах .fcalcp6 span . Останется только сложить их. Для этого используется функция crachet() , которая срабатывает при любом изменении ползунка. Она автоматически берет каждое значение и меняет согласно такого правила (убирает пробелы и преобразовывает строку в число):

А затем складывает все значения. Результат записывается в тег .fcalcp9 .

Вот таким плавным образом мы научились создавать не только ползунки, но и калькуляторы на их основе.

Источник